如何使浮动div的父级高度为100％？

小编典典

如何使浮动div的父级高度为100％？

html

这是HTML：

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

这是CSS：

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

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

我如何强制其为父div高度的100％？

阅读 291

2020-05-10

共1个答案

小编典典

为了使#outer高度基于其内容并#inner基于其高度，使两个元素都绝对定位。

可以在css height属性的规范中找到更多详细信息，但本质上，如果的height为，则#inner必须忽略#outerheight ， 除非_绝对定位。然后，高度将为0， _除非 将其自身绝对定位。#outer``auto #outer``#inner #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>

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

2020-05-10