下面是HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS:
#inner {
float: left;
height: 100%;
}
通过Chrome开发工具检查,内部div的高度为0px。
我怎么能强迫它是父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;对于子元素,它们都具有相同的高度。
其他回答
只要你不需要支持IE8之前的版本,你可以使用display: table-cell来实现:
HTML:
<div class="outer">
<div class="inner">
<p>Menu or Whatever</p>
</div>
<div class="inner">
<p>Page contents...</p>
</div>
</div>
CSS:
.inner {
display: table-cell;
}
这将迫使具有.inner类的每个元素占用其父元素的全部高度。
实际上,只要父元素处于定位状态,您就可以将子元素的高度设置为100%。也就是说,如果你不希望父节点被完全定位。让我进一步解释:
<style>
#outer2 {
padding-left: 23px;
position: relative;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2 {
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
</div>
下面是一种更简单的实现方法:
设置三个元素的容器(#outer) display: table 并设置元素本身(#inner) display: table-cell 移除浮子。 成功。
#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}
感谢@Itay在浮动div, 100%高度
当你需要几个具有相同高度的子元素时,类似的情况可以用flexbox解决:
https://css-tricks.com/using-flexbox/
设置显示:伸缩;对于parent和flex: 1;对于子元素,它们都具有相同的高度。
try
#outer{overflow: auto;}
显示更多选项: 如何防止浮动元素的父元素崩溃?