Question

正如您将看到的，我有一个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。

Answer 1

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

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

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

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

要成功运作，您的子元素必须 <{1>}，因为您需要 #contentMain 和 #contentSidebar ，而是在 #contentSidebar div关闭之后，使这些浮动（浮动：左和浮动：正确）添加position:absolute以清除浮动，允许父级完美地包裹它们。

我已将所需的CSS放在this Pastebin中，请注意您必须使用div清除浮动，如上所述。

Answer 2

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

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;
}

父母不会扩大到孩子的身高

2 个答案: