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

要使#outer的高度基于其内容，并使#inner的高度基于其内容，则使两个元素都处于绝对位置。

更多细节可以在CSS高度属性的规范中找到，但本质上，如果#outer的高度是auto， #inner必须忽略#outer的高度，除非 #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选择宽度，并在#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>

我删除了我之前的答案，因为它基于太多关于你的目标的错误假设。

实际上，只要父元素处于定位状态，您就可以将子元素的高度设置为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>

只要你不需要支持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类的每个元素占用其父元素的全部高度。

我做了一个例子解决你的问题。

你必须做一个包装，浮动它，然后定位你的div，给它100%的高度。

超文本标记语言

<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">&nbsp;</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中;如果没有显式声明，这些属性将基于父容器(.right-wrapper)进行计算。

因此，DIV的100%高度将基于.container的最终高度计算，而.right position的最终位置将基于父容器计算。

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

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

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

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

对于父节点:

display: flex;

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

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

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

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

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

这对我很有帮助。

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

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

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

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

为父元素设置display: flex;，为子元素设置flex: 1;，它们都具有相同的高度。

试一试

#outer{overflow: auto;}

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

这是等高网格系统的代码示例。

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

上面是外部div的CSS

#inner{
width: 20%;
float: left;
border: 1px solid;
}

上面是内部div

希望这对你有所帮助