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

【问题标题】：How to make a floated div 100% height of its parent?如何使浮动 div 的高度达到其父级的 100%？
【发布时间】：2011-03-04 05:58:21
【问题描述】：

这里是 HTML：

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

这里是 CSS：

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

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

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

【问题讨论】：

所以你希望外部 div 中的文本（而不是内部 div 中），但浮动的内部 div 是外部 div 的高度？
您想要达到的最终结果是什么？我想我的困惑在于，如果内部 div 与外部一样高，而外部与文本一样高，那与内部 div 中的文本不一样吗？
@edl：是的，它是:) 我想要这样的原因是内部 div 有一个图像作为它的背景。文本需要在它旁边。两者都需要在外部 div 内，因为它也有背景图片。
另见stackoverflow.com/questions/1122381
看到并尝试这个问题的答案真是令人沮丧。

标签： css html height

【解决方案1】：

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

更多细节可以在css height property的规范中找到，但本质上，如果#outer的高度是auto，#inner必须忽略#outer的高度，除非@ 987654328@绝对定位。那么#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 中添加填充以伪造文本换行 I怀疑你想要。比如下面#outer的padding就是#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>

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

【讨论】：

嗯..问题是关于浮动 div 的。您回答了绝对位置 div
我从未停止惊讶在HTML/CSS 中实现极其简单的事情是多么复杂：)
有什么方法可以在没有硬编码宽度的情况下做到这一点？不适合响应式容器。
我不知道为什么它会被如此多地接受和支持。问题是关于浮动 div，这是我从搜索中来到这里的原因，而这回答了绝对定位的 div。
如何使浮动容器垂直适合它的容器？不再让它漂浮了！哈哈。不错的尝试，而且足够接近，实际上被认为是有用的。

【解决方案2】：

其实只要定位父元素，就可以设置子元素的高度为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>

【讨论】：

酷，这比 Chadwick 对 position:absolute 的要求限制更少（这可能会干扰网站的样式）
可能只有我一个人，但如果侧边栏大于内容，我会遇到问题。背景颜色将在父容器处停止，但侧边栏内容会溢出父容器。
这是一个更灵活的解决方案，即使您有多个浮动子元素，将它们的偏移设置为绝对定位似乎也是一个可以接受的缺点。 +1
非常感谢非常。我已经发布了我的具体解决方案，作为对 SO 上另一个问题的回答：stackoverflow.com/a/31749164/84661。

【解决方案3】：

只要不需要支持 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 类的元素占据其父元素的整个高度。

【讨论】：

虽然这会起作用，但它不会显示边距，即使您指定了边距。因此，如果您想分配保证金，此解决方案将失败。您可以将填充分配为一种解决方法，但是如果您需要边距（而不是填充），您将如何解决这个问题？
我在这里遗漏了什么吗？您的问题要求浮动元素的高度为 100%。浮动时，display: table-cell; 元素不再填充其容器的高度？我一定错过了什么，因为这是你自己的问题......？

【解决方案4】：

我发了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">&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 位置的最终位置将根据父容器计算。

【讨论】：

对于您可以保证 .right 列的内容比.left 列的内容短的情况，这是一个可靠的解决方案。例如，如果您在其中 .left 列具有一些可变大小的内容并且右列仅显示指向详细信息页面的箭头的组件上使用此解决方案，则此解决方案效果很好。为此 +1

【解决方案5】：

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

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

这适用于将单个元素浮动到其父元素高度为 100% 的一侧，而通常会环绕的其他浮动元素保持在一侧。

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

【讨论】：

在这个布局问题上抛出 javascript 似乎有点矫枉过正。
作为一个必须在 IE 中开发的人：谢谢！
可能有点矫枉过正，但这是一个很好的答案，谢谢！
我同意所有的定位问题都应该不用JS来解决。
使用JS AND jQuery 太过分了

【解决方案6】：

对于父母：

display: flex;

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

编辑：唯一的缺点就是IE照旧，IE9不支持flex。 http://caniuse.com/flexbox

编辑 2：正如@toddsby 所指出的，对齐项目是针对父级的，它的默认值实际上是 stretch。如果你想要一个不同的孩子值，有 align-self 属性。

编辑 3： jsFiddle：https://jsfiddle.net/bv71tms5/2/

【讨论】：

您应该指出，这仅适用于现代浏览器，甚至需要供应商前缀。
我很惊讶这个解决方案没有得到更多的关注，因为最初的问题需要子 div 是浮动的并且所有的位置：绝对解决方案确实在大多数情况下都在工作您将使用浮点数的情况。此解决方案提供了一个很好的解决方案，其中 position:absolute 的副作用不是问题，如果您愿意进一步挖掘，可以获得一些非常好的跨浏览器兼容性。
这就是答案。 IE9 很快就会出局，不妨给它一个好的、坚实的支持来帮助它。这个解决方案非常好，简单，容易......我已经完成了替代解决方案的破解。 ;)
根据最新的 Flexbox 规范：参见 w3.org/TR/css-flexbox-1/#align-items-property。 align-items: stretch; 不是必需的，因为它是默认值。它也应该在父母而不是孩子上定义。
在答案中添加了小提琴。 @Tigran

【解决方案7】：

这是一种更简单的实现方式：

设置三个元素的容器（#outer）显示：table
并设置元素本身（#inner）显示：table-cell
移除浮动。
成功。

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

感谢@Itay Floated div, 100% height

【讨论】：

【解决方案8】：

这对我有帮助。

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

更改 right: 和 left: 以设置更可取的#inner 宽度。

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

试试

#outer{overflow: auto;}

【讨论】：

“溢出：隐藏”选项似乎效果更好，因为没有滚动的机会......
如果你想出了更好的解决方案，你可以edit你的答案。此外，最好在答案中添加更多信息，例如链接中提供的信息。

【解决方案11】：

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

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

上面是外层div的CSS

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

上面是内部div

希望对你有帮助

【讨论】：