注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法，请参见:https://stackoverflow.com/a/23300532/1155721

我建议你看看跨浏览器CSS的等高列，没有黑客。

基本上，以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单)，所以请找到一个适当的预打包解决方案。

同样，答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高，答案就略有不同。

我可能有点晚了，但我找到了一个周围的工作，可能是一个hack。 首先给父层一个弯曲和100vh的高度

就像这样:

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}

要做到这一点，最简单的方法就是假装。《A List Apart》多年来对此进行了广泛的报道，比如Dan Cederholm 2004年的一篇文章。

我通常是这样做的:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

您可以通过将#container包装在另一个div中，将标题div嵌入为#container的兄弟，并将边缘和宽度样式移动到父容器中，轻松地在此设计中添加标题。此外，CSS应该移动到一个单独的文件，而不是保持内联等等。最后，clearfix类可以在positioniseverything上找到。

对于父节点:

display: flex;

您应该添加一些前缀，例如http://css-tricks.com/using-flexbox/。

正如@Adam Garner所指出的，align-items:拉伸;不需要。它的用法也适用于父母，而不是孩子。如果你想定义儿童拉伸，你使用align-self。

.parent { 背景:红色; 填充:10 px; 显示:flex; ｝ .other-child { 宽度:100 px; 背景:黄色; 身高:150 px; 填充:.5rem; ｝ .child { 宽度:100 px; 背景:蓝色; ｝ < div class = "父" > < div class = "另一个孩子“> 仅用于拉伸父节点 < / div > < div class = "孩子" > < / div > < / div >

你可以把display: flex到div#主，align-self: stretch到div#导航。

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

// CSS file
#main {
  display: flex;
}

#navigation {
  align-self: stretch;
}    

这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。

html,body {
    height:100%;
}

这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧，但这是最简单的方法。