默认情况下，块元素使用其父元素的整个宽度。

这就是它们如何满足垂直堆叠的设计要求。

9.4.1块格式化上下文在块格式化上下文中，垂直，从包含块的顶部开始。

然而，这种行为不会延伸到高度。

默认情况下，大多数元素都是其内容的高度（高度：auto）。

与宽度不同，如果需要额外空间，则需要指定高度。

因此，请记住以下两点：

除非需要全宽，否则需要定义块元素的宽度除非需要内容高度，否则需要定义元素的高度

.联系人{显示：flex；/*默认情况下为全宽*/最小高度：100vh；/*至少使用视口的全高度*/}.左侧{弹性：0 0 60%；背景色：番茄；}.对{挠曲：1；背景色：粉色；}body｛margin:0；｝/*删除默认边距*/<div class=“联系人”><section class=“left”><div class=“”><h1>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</h1></div></section><section class=“right”><img/></section></div>

100%对于宽度和高度的作用不同。

当您指定width:100%时，意味着“从父元素或窗口的宽度中占用可用宽度的100%”

当您指定height:100%时，它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度，则所有子元素的高度将为0或父元素的高度，这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。

我总是指定车身的最小高度为100vh，这使得定位和计算变得容易，

body {
  min-height: 100vh;
}

在这种情况下，可以使用vh，它是相对于视口高度的1%。。。

这意味着，如果你想掩盖高度，只需使用100vh。

请看下面我在这里为您绘制的图像：

尝试我为您创建的代码段，如下所示：

.左侧{高度：100vh；宽度：50%；背景色：灰色；浮动：左侧；}.对{高度：100vh；宽度：50%；背景色：红色；浮动：右侧；}<div class=“left”></div><div class=“right”></div>

如果你能绝对定位你的元素，

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

如果要设置＜div＞或任何元素的高度，也应该将＜body＞和＜html＞的高度设置为100%。然后可以将元素的高度设置为100%：）

下面是一个示例：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

如果使用位置：绝对；和jQuery，您可以使用

$("#mydiv").css("height", $(document).height() + "px");