2021年的读者:

试试这个:

.parent {
  position: relative;

  display: flex;                 // And you will probably need this too.
  flex-direction: row;           // or column.
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;

  align-self: center;            // And you will probably need this too.
}

以下是我正在做的事情:

经过长时间的寻找和尝试，没有什么能解决我的问题

style = "height:100%;"

关于儿童div

对于父母应用这个

.parent {
    display: flex;
    flex-direction: column;
}

此外，我使用bootstrap，这并没有腐败的响应为我。

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

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

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

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

给予位置:绝对;对我的孩子有效

我的解决方案:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

要做到这一点，最简单的方法就是假装。《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上找到。