如何使浮动 div 的高度达到其父级的 100%？

小编典典

如何使浮动 div 的高度达到其父级的 100%？

all

这是HTML：

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

这是CSS：

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

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

如何强制它为父 div 高度的 100%？

阅读 77

2022-05-12

共1个答案

小编典典

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

更多细节可以在CSS 高度属性的规范中找到，但本质上，如果高度为，则#inner必须忽略高度，除非绝对定位。然后高度将为 0，除非
它本身是绝对定位的。#outer``#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以伪造我怀疑您想要的文本换行。比如下面的
padding就是+3#outer的宽度。#inner方便（因为重点是让#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>

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

2022-05-12