家长div不扩大到儿童的身高 [英] Parent div not expanding to children's height

问题描述

正如你将看到的，我有一个 div （ #innerPageWrapper ），它包含了包含内容。 #innerPageWrapper 在布局中也可视为半透明边框。

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

是 #innerPageWrapper

  #innerPageWrapper {
宽度：1100px; 
身高：100％; 
 display：inline-block; 
填充：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高度） 。首先，你正在使用 height：100％; code> 在你的情况中是错误的。有关为什么不使用 height：100％的解释，请查看本文;



要理解为什么，你需要了解浏览器如何解释
的高度和宽度。 Web浏览器计算总可用宽度为
，这是浏览器窗口打开的宽度的函数。如果您没有在您的文档中设置任何宽度值
，浏览器将自动
流动内容以填充整个窗口宽度。

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

其次，为了使外层-div（在这种情况下是 #innerPageWrapper ）环绕子元素，你应该在这个包装上使用 overflow：hidden 。 b
$ b

为了成功地工作，您的子元素必须 为 position：absolute em> #contentMain 和 #contentSidebar ，而是使这些浮动（ float：left 和 float：在 #contentSidebar div关闭后，添加< div style =clear：both>< / div> 清理浮游物，允许父母完美地环绕它们。

我已将所需的CSS放入这个 Pastebin，注意你必须使用div来清除你的浮动，就像我上面提到的那样。

As you will see, I have a div (#innerPageWrapper) that wraps around the divs that contain the content. #innerPageWrapper also does act visually as a semi-transparent border in the layout.

My problem is that #innerPageWrapper won't expand to fit the children inside, let alone expand to fill the rest of the page.

This is the code for #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;
}

I have tried many things (including using calc() for div heights) unsuccessfully. I want to avoid using jQuery.

解决方案

Firstly, you are using height:100%; which in your case is wrong. For an explanation on why not to use height:100%, check this article;

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.

Secondly, to make the outer-div (in this case #innerPageWrapper) wrap around the child elements, you should use overflow:hidden on this wrapper.

For this to successfully work, your child elements must not be position:absolute as you have for #contentMain and #contentSidebar, instead make these floats (float:left and float:right) and after the #contentSidebar div closes, add a <div style="clear:both"></div> to clear floats, allowing the parent to wrap around them perfectly.

I have put the required CSS in this Pastebin, note that you must clear your floats using a div as I mentioned above.

这篇关于家长div不扩大到儿童的身高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！