如何强制子div是100%的父div的高度而不指定父的高度?

我有一个网站与以下结构:

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

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

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

导航栏在左边，内容div在右边。内容div的信息是通过PHP拉入的，因此每次都是不同的。

我怎样才能垂直缩放导航，使其高度与内容div的高度相同，无论哪个页面被加载?

当前回答

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

看看这个例子。

其他回答

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

style = "height:100%;"

关于儿童div

对于父母应用这个

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

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

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

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

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

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

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

高度:< % >将只工作，如果你所有的父节点都具有指定的百分比高度和固定的高度(像素，ems等)在顶层。这样，高度就会随你的喜好而下降。

您可以像前面提到的@Travis那样为html和body元素指定100%，以使页面高度向下级联到节点。

试着让最低利润率达到100%。

margin-bottom: 100%;

推荐文章