css - 如何使 float div 的高度达到其父级的 100%？

Question

这是 HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

这是 CSS:

#inner {
  float: left;
  height: 100%;
}

使用 Chrome 开发者工具检查后，内部 div 的高度为 0px。

如何强制它为父 div 高度的 100%？

Answer 1

对于 parent :

display: flex;

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

编辑: 唯一的缺点就是IE照旧，IE9不支持flex。 http://caniuse.com/flexbox

编辑 2: 正如@toddsby 所指出的，对齐元素是针对父级的，它的默认值实际上是 stretch。如果你想要一个不同的 child 值，有 align-self 属性。

编辑 3: jsFiddle:https://jsfiddle.net/bv71tms5/2/