我的问题是#innerPageWrapper不会扩展，以适应孩子的内部，更不用说扩展来填补页面的其余部分。
这是#innerPageWrapper的代码
#innerPageWrapper {
width: 1100px;
height: 100%;
display: inline-block;
padding: 0 50px 0 50px;
background: rgba(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。
解决方法
To understand why,you need to understand how browsers interpret
height and width. Web browsers calculate the total available width as
a function of how wide the browser window is opened. If you don’t set
any width values on your documents,the browser will automatically
flow the contents to fill the entire width of the window.But height is calculated differently. In fact,browsers don’t evaluate
height at all unless the content is so long that it goes outside of
the view port (thus requiring scroll bars) or if the web designer sets
an absolute height on an element on the page. Otherwise,the browser
simply lets the content flow within the width of the view port until
it comes to the end. The height is not calculated at all. The problem
occurs when you set a percentage height on an element who’s parent
elements don’t have heights set. In other words,the parent elements
have a default height: auto;. You are,in effect,asking the browser
to calculate a height from an undefined value. Since that would equal
a null-value,the result is that the browser does nothing.
其次，要使外部div(在这种情况下为#innerPageWrapper)环绕子元素，您应该在此包装上使用overflow：hidden。
为了成功工作，您的子元素不能像#contentMain和#contentSidebar那样具有绝对的位置，而不是使用这些浮动(float：left和float：right)，并在#contentSidebar div关闭后添加< div style =“clear：both”>< / div>清除漂浮物，让父母完美地包裹他们。
我已经将所需的CSS放在this Pastebin中，请注意，您必须使用上面提到的div清除浮点数。
