如何使一个浮动div的父母的高度100％？

这里是HTML：

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

这里是CSS：

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

使用Chrome开发人员工具进行检查时，内部div的高度为0px。

我怎么能强制它是父div的高度的100％？

Answer 1

#outer高度根据其内容，并且#inner它的高度，使这两个元素绝对定位。

更多的细节可以在规范中find的CSS高度属性 ，但实质上， #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设置将被忽略，所以你将需要明确地select#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> 

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

Answer 2

对于父母：

 display: flex; 

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

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

编辑2：正如@toddsby指出的，alignment项目是为父，其默认值实际上是拉伸 。 如果你想要一个不同的值的孩子，有自我alignment的属性。

Answer 3

实际上，只要父元素被定位，您可以将孩子的身高设置为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> 

Answer 4

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

Answer 5

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

你必须做一个包装，漂浮，然后绝对你的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">&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位置的最终位置将根据父容器进行计算。

Answer 6

这是一个更简单的方法来实现这一点：

1. 设置三个元素的容器（#outer）显示：表
2. 并设置元素本身（#inner）显示：表格单元格
3. 删除浮动。
4. 成功。

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

感谢@Itay 浮动div，100％的高度

Answer 7

如果你准备使用一个小的jQuery，答案很简单！

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

这适用于将单个元素浮动到其父项高度为100％的一边，而其他正常包裹的浮动元素保留在一边。

希望这可以帮助jQuery的粉丝们。

Answer 8

这帮助了我。

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

改变右边：左边：设置更好的#inner宽度。

Answer 9

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

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

设置display: flex; 父母和flex: 1; 对于孩子的元素，他们都会有相同的高度。

Answer 10

尝试

 #outer{overflow: auto;} 

在下面显示更多的选项： 你如何保持浮动元素的父母崩溃？