css - 父 div 没有扩展到 child 的高度

Question

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

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

这是#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文章；

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在这个包装上。

要使其成功运行，您的子元素必须不是position:absolute正如您对#contentMain 和#contentSidebar 所做的那样，改为制作这些 float (float:left 和 float:right) 并在 #contentSidebar div 关闭后，添加 <div style="clear:both"></div>清除 float ，让 parent 完美地环绕他们。

我已将所需的 CSS 放入 this 中Pastebin，请注意，您必须使用我上面提到的 div 清除 float 。