27

如您所见，我有一个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。

4

2 回答 2

83

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

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

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

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

为此，您的子元素不能像#contentMain 和#contentSidebar那样，而是使这些浮动（float:left和float:right）并在#contentSidebar div 关闭后，添加 a以清除浮动，允许父母将他们完美地包裹起来。position:absolute<div style="clear:both"></div>

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

于 2013-10-15T07:52:27.870 回答
13

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

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;
}
于 2013-10-15T07:55:08.723 回答