与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。

随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。

注意标记和CSS是多么简单。没有桌子黑客之类的。

所有主要浏览器以及IE11+都支持flex模型。

html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>

在这里了解有关flex模型的更多信息。

其中一个选项是使用CSS表。它具有强大的浏览器支持，甚至可以在Internet Explorer 8中工作。

JSFiddle示例

html，正文{高度：100%；边距：0；}.容器{显示：表格；宽度：100%；高度：100%；}.左，.右{显示：表格单元格；宽度：50%；}.对{背景：灰色；}<div class=“container”><div class=“left”></div><div class=“right”></div></div>

使用FlexBox CSS

Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名，但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中，并选择要展开的部分。它们将自动占用容器中的所有可用空间。

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

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

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>

尝试以下CSS：

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

即使有了这里的所有答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度，当内容超过一页时，布局就会中断。如果我改用100%高度/分钟高度，当内容小于页面高度时，布局会中断。

我找到的解决方案（解决了这两种情况）是结合前两个答案：

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}