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

style = "height:100%;"

关于儿童div

对于父母应用这个

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

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

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

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

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

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

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

对我有效的是添加 style={{display: 'flex'， overflowY: "auto"}} 给所有孩子的父母，然后 style={{overflowY: "auto"}} 对孩子本身。

我有同样的问题，它的工作基于Hakam Fostok的答案，我已经创建了一个小例子，在某些情况下，它可能不需要添加显示:flex;而弯曲方向:圆柱;在父容器上

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

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

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

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

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

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

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