这是HTML：
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS：
#inner {
float: left;
height: 100%;
}
使用Chrome开发人员工具进行检查后，内部div的高度为0px。
如何强制它为父div的高度的100％？
答案 0 :(得分：123)
要使#outer高度基于其内容，并使#inner基于其高度，请使两个元素绝对定位。
更多详细信息可以在css height property的规范中找到，但基本上，如果#inner的身高为#outer，则#outer必须忽略auto身高，除非 #outer绝对定位。然后#inner高度为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，float设置将被忽略，因此您需要明确选择#inner的宽度，并在{{1}中添加填充伪造我怀疑你想要的文字包装。例如，在下面，#outer的填充是#outer +3的宽度。方便地（因为整个点是#inner高度为100％），不需要在#inner下面包装文本，所以这看起来就像#inner浮动。
#inner我删除了之前的答案，因为它基于对您的目标的错误假设。
答案 1 :(得分：111)
对于父母：
display: flex;
您应该添加一些前缀http://css-tricks.com/using-flexbox/
编辑： 唯一的缺点是IE像往常一样，IE9不支持flex。 http://caniuse.com/flexbox
编辑2： 正如@toddsby所指出的那样，对齐项目是针对父级的，其默认值实际上是拉伸。如果你想为孩子设置不同的值，那就是align-self属性。
编辑3： jsFiddle：https://jsfiddle.net/bv71tms5/2/
答案 2 :(得分：75)
实际上，只要定位了父元素，就可以将子元素的高度设置为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>
答案 3 :(得分：22)
只要您不需要支持早于IE8的Internet Explorer版本，就可以使用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类的元素占据其父元素的完整高度。
答案 4 :(得分：15)
我做了example来解决你的问题。
你必须制作一个包装，浮动它，然后将你的div放置绝对并给它100％的高度。
<强> HTML
<div class="container">
<div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
<div class="right-wrapper">
<div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
</div>
<div class="clear"> </div>
</div>
<强> CSS：
.container {
width: 100%;
position:relative;
}
.left {
width: 50%;
background-color: rgba(0, 0, 255, 0.6);
float: left;
}
.right-wrapper {
width: 48%;
float: left;
}
.right {
height: 100%;
position: absolute;
}
说明： .right div绝对定位。这意味着它的宽度和高度，以及顶部和左侧位置将基于第一个父div绝对或相对定位来计算，如果在CSS中显式声明了width或height属性;如果它们没有声明，那么这些属性将根据父容器（.right-wrapper）计算。
因此，DIV的100％高度将根据.container最终高度计算，而.right位置的最终位置将根据父容器计算。
答案 5 :(得分：15)
这是实现这一目标的更简单方法：
#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}
答案 6 :(得分：10)
如果您准备使用一点jQuery，答案很简单！
$(function() {
$('.parent').find('.child').css('height', $('.parent').innerHeight());
});
这适用于将单个元素浮动到其父级高度为100％的一侧，而通常环绕的其他浮动元素则保留在一侧。
希望这可以帮助jQuery粉丝。
答案 7 :(得分：3)
这是高度相等的网格系统的代码示例。
#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}
上面是外部div的CSS
#inner{
width: 20%;
float: left;
border: 1px solid;
}
以上是内部div
希望这能帮到你
答案 8 :(得分：1)
这帮助了我。
#outer {
position:relative;
}
#inner {
position:absolute;
top:0;
left:0px;
right:0px;
height:100%;
}
向右更改：向左：设置更好的#inner width。
答案 9 :(得分：0)
类似的情况下，当您需要多个子元素具有相同的高度时，可以使用flexbox解决：
https://css-tricks.com/using-flexbox/
为父元素设置rddOut:[(a,b),(k,l)]
[(a,b),(c,g)]
[(a,b),(f,x)]
，为子元素设置display: flex;，它们都具有相同的高度。
答案 10 :(得分：-1)