我的解决方案:

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

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

来自:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

状态引导，但你不需要引导来使用这个。回答这个老问题，因为这对我来说很管用，而且似乎很容易实现。

这和我对这个问题的回答是一样的

这道题的题目和内容有点矛盾。标题说的是父div，但问题让它听起来像你想要两个兄弟div(导航和内容)是相同的高度。

你(a)希望导航和内容都是主高度的100%，还是(b)希望导航和内容是相同的高度?

我假设(b)……如果是这样的话，我不认为你将能够做到这一点，因为你目前的页面结构(至少，不是纯CSS和没有脚本)。你可能需要这样做:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

并将内容div设置为左侧空白，无论导航窗格的宽度是多少。这样，内容的内容就在导航栏的右边，你可以将导航栏的高度设置为内容高度的100%。

编辑:我完全是在我的头脑中做的，但你可能还需要将导航div的左侧空白设置为负值，或将它的绝对左侧设置为0，以将它推回到最左边。问题是，有很多方法可以实现这一点，但并不是所有的方法都能与所有浏览器兼容。

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

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

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

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

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

对于父节点:

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 >