下面是HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS:
#inner {
float: left;
height: 100%;
}
通过Chrome开发工具检查，内部div的高度为0px。
我怎么能强迫它是父div高度的100%呢?
当前回答
try
#outer{overflow: auto;}
显示更多选项: 如何防止浮动元素的父元素崩溃?
其他回答
try
#outer{overflow: auto;}
显示更多选项: 如何防止浮动元素的父元素崩溃?
对于父节点:
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/
下面是一种更简单的实现方法:
设置三个元素的容器(#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%;
}
改变右:和左:设置更可取的#内部宽度。
#outer height基于它的内容，#inner height基于它的内容，这两个元素都是绝对定位的。
更多细节可以在css height属性的规范中找到，但本质上，如果#outer的高度是自动的，#inner必须忽略#outer height，除非#outer是绝对定位的。那么#inner height将为0，除非#inner本身的位置是绝对的。
<style>
#outer {
position:absolute;
height:auto; width:200px;
border: 1px solid red;
}
#inner {
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
然而……通过绝对定位#inner，浮动设置将被忽略，所以你需要明确地为#inner选择一个宽度，并在#outer中添加填充来伪造我怀疑你想要的文本包装。例如，下面，#outer的填充是#inner的宽度+3。方便的是(因为整个重点是让#inner高度为100%)，没有必要在#inner下面换行文本，所以这看起来就像#inner被浮动了一样。
<style>
#outer2{
padding-left: 23px;
position:absolute;
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>
text
</div>
我删除了我之前的答案，因为它基于太多关于你的目标的错误假设。
