父 div 没有扩展到孩子的高度

Posted 2023-03-06

【中文标题】父 div 没有扩展到孩子的高度

【英文标题】：Parent div not expanding to children's height

【发布时间】：2013-10-22 22:22:34

【问题描述】：

如您所见，我有一个 div (#innerPageWrapper) 环绕包含内容的 div。 #innerPageWrapper 在视觉上也充当布局中的半透明边框。

我的问题是#innerPageWrapper 不会扩展以适应里面的孩子，更不用说扩展以填充页面的其余部分了。

这是#innerPageWrapper的代码

#innerPageWrapper 
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

我尝试了很多事情（包括使用 calc() 计算 div 高度）都没有成功。我想避免使用 jQuery。

【参考方案1】：

首先，您使用的是height:100%;，在您的情况下是错误的。有关为什么不使用height:100% 的说明，请查看this 文章；

要了解原因，您需要了解浏览器如何解释 高度和宽度。 Web 浏览器计算总可用宽度为 浏览器窗口打开宽度的函数。如果你不设置 文档上的任何宽度值，浏览器将自动 使内容流动以填满窗口的整个宽度。

但是高度的计算方式不同。事实上，浏览器不会评估 除非内容太长以至于超出 视口（因此需要滚动条）或者如果网页设计师设置 页面上元素的绝对高度。否则，浏览器 只是让内容在视口的宽度内流动，直到 它到了尽头。高度根本不计算。问题 当您在父元素上设置百分比高度时发生 元素没有设置高度。换句话说，父元素 有一个默认高度：auto;。实际上，您是在询问浏览器 从未定义的值计算高度。因为那将等于 一个空值，结果是浏览器什么都不做。

其次，要让外层 div（在本例中为 #innerPageWrapper）包裹子元素，您应该在此包裹器上使用 overflow:hidden。

要使此功能成功运行，您的子元素必须不像 #contentMain 和 #contentSidebar 那样为 position:absolute，而不是制作这些 floats（float:left 和 float:right）并在 #contentSidebar div 关闭后，添加一个<div style="clear:both"></div> 清除浮动，让父级完美环绕它们。

我已将所需的 CSS 放在 thisPastebin 中，请注意，您必须使用我上面提到的 div 清除浮动。

【讨论】：

有效！谢谢。那篇文章也很好读。考虑到这些准则，我将从头开始重写我的代码。谢谢

包装器上的

overflow:hidden 在我的情况下起到了作用。对于像我这样想知道为什么的人，这里有一个关于这个主题的讨论：***.com/q/19972790/3136474

确保孩子没有得到 position:absolute

检查是否有line-height 指令，它也可以强制执行高度。

【参考方案2】：

尝试将父元素的宽度和高度设置为自动。 简化示例：

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper 
    width:auto;
    height:auto;
    background:red;


#innerPageWrapper p
    width: 100px;
    height: auto;
    margin: 10px auto;
    background: yellow;

编辑：

查看这个小提琴以获得更高级的示例，包括水平和垂直中心：http://jsfiddle.net/kimgysen/8nWDE/1/

父元素会动态适应子元素的边界。 您还可以在子元素上设置动态宽度和高度。

.outerDiv
    display: table-cell;
    background-color: yellow;
    width: auto; 
    height: auto;
    vertical-align: middle;
    text-align: center;


.innerDiv
    display: inline-block;
    background-color: red; 
    width: 100px;
    height: 100px;
    margin: 20px;

【讨论】：

在最佳答案中的所有其他数百万个修复程序中，这对我有用。只需将父母的身高设置为自动！