3 divs 占据父级的所有高度，第一个和最后一个 div 可变高度

Question

我一直在尝试实现以下设计：

使用javascript，我已经轻松成功了。我试图实现相同的行为，但没有任何 Javascript，仅使用 CSS，但我失败了。我想知道是否可以。

我当前的实现是基于 div，但它可以是任何其他 html 元素（table，等等）

<div id="parent">
  <div id="one">
   Some variable content
  </div>
  <div id="two">
    Should occupy the remaining height
  </div>
  <div id="three">
    Some variable content
  </div>
</div>

这里是JSFiddle实现的基础。

感谢您的帮助。

Answer 1

干杯！是的，您可以使用 flex。简单明了，设置容器为display:flex，然后你就可以通过flex-grow属性来指定容器children中哪些需要增长，哪些不需要。

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

#one, #three {
 flex-grow: 0;
}

#two {
  flex-grow: 1;
}

查看更新后的 fiddle：https://jsfiddle.net/ypzd68wv/3/

PS：检查您的最低浏览器支持要求；）http://caniuse.com/#feat=flexbox

3 divs 占据父级的所有高度，第一个和最后一个 div 可变高度

3 divs occupying all the height of parent, first and last div variable height

css

height

position