我有一个结构如下的网站:

<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 的高度相同？

最佳答案

对于 parent :

display: flex;

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

正如@Adam Garner 所说， align-items: stretch;不需要。它也适用于 parent ，而不是 child 。如果你想定义 child 的拉伸(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>

https://stackoverflow.com/questions/1122381/