如何使浮动div 100%的高度，其父?

下面是HTML:

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

这是CSS:

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

通过Chrome开发工具检查，内部div的高度为0px。

我怎么能强迫它是父div高度的100%呢?

当前回答

当你需要几个具有相同高度的子元素时，类似的情况可以用flexbox解决:

https://css-tricks.com/using-flexbox/

设置显示:伸缩;对于parent和flex: 1;对于子元素，它们都具有相同的高度。

其他回答

下面是一种更简单的实现方法:

设置三个元素的容器(#outer) display: table 并设置元素本身(#inner) display: table-cell 移除浮子。成功。

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

感谢@Itay在浮动div, 100%高度

这对我很有帮助。

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

改变右:和左:设置更可取的#内部宽度。

对于父节点:

display: flex;

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

编辑: 唯一的缺点是IE和往常一样，IE9不支持flex。 http://caniuse.com/flexbox

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

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

try

#outer{overflow: auto;}

显示更多选项: 如何防止浮动元素的父元素崩溃?

如果您准备使用一点jQuery，答案很简单!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

这可以很好地将单个元素浮动到父元素高度100%的一侧，而其他通常环绕的浮动元素则保持在一侧。

希望这对jQuery爱好者有所帮助。

推荐文章