如何在不指定父级高度的情况下强制子级 div 为父级 div 高度的 100%？

Question

我有一个具有以下结构的网站：

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

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

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

导航在左边，内容 div 在右边。 content div 的信息是通过 PHP 拉入的，所以每次都不一样。

如何垂直缩放导航，使其高度与内容 div 的高度相同，无论加载哪个页面？

原文由 user137726 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

---

我建议您看一下 Equal Height Columns with Cross-Browser CSS and No Hacks 。

基本上，以浏览器兼容的方式使用 CSS 执行此操作并非微不足道（但对于表格而言是微不足道的），因此请为自己找到一个合适的预打包解决方案。

此外，答案因您想要 100% 高度还是等高而异。通常它是等高的。如果它是 100% 高度，答案会略有不同。

原文由 cletus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于家长：

 display: flex;

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

正如@Adam Garner 指出的那样， align-items: stretch;不需要。它的用法也适用于父母，而不是孩子。如果你想定义孩子的伸展，你可以使用 align-self。

 .parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {
  width: 100px;
  background: blue;
}

 <div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

原文由 Aiphee 发布，翻译遵循 CC BY-SA 4.0 许可协议