Html 父 div 没有扩展到孩子的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19375715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parent div not expanding to children's height
提问by Andrew Mihelakis
As you will see, I have a div(#innerPageWrapper) that wraps around the divs that contain the content. #innerPageWrapperalso does act visually as a semi-transparent border in the layout.
正如您将看到的，我有一个div( #innerPageWrapper) 环绕包含内容的 div。#innerPageWrapper也确实在视觉上充当布局中的半透明边框。
My problem is that #innerPageWrapperwon't expand to fit the children inside, let alone expand to fill the rest of the page.
我的问题是#innerPageWrapper不会扩展以适应里面的孩子，更不用说扩展以填充页面的其余部分。
This is the code for #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;
}
I have tried many things (including using calc() for div heights) unsuccessfully. I want to avoid using jQuery.
我尝试了很多事情（包括使用 calc() 来表示 div 高度）都没有成功。我想避免使用 jQuery。
回答by BrownEyes
Firstly, you are using height:100%;which in your caseis wrong. For an explanation on why not to use height:100%, check thisarticle;
首先，您使用的是height:100%;哪个在您的情况下是错误的。有关为什么不使用的解释height:100%，请查看这篇文章；
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.
要了解原因，您需要了解浏览器如何解释高度和宽度。Web 浏览器根据浏览器窗口打开的宽度计算总可用宽度。如果您没有在文档上设置任何宽度值，浏览器将自动排列内容以填充窗口的整个宽度。
但是高度的计算方式不同。事实上，浏览器根本不会评估高度，除非内容太长以至于超出了视口（因此需要滚动条），或者如果网页设计人员在页面上的元素上设置了绝对高度。否则，浏览器只会让内容在视口的宽度内流动，直到结束。高度根本没有计算。当您在父元素未设置高度的元素上设置百分比高度时，会出现问题。换句话说，父元素有一个默认高度：auto;。实际上，您是在要求浏览器根据未定义的值计算高度。由于这将等于空值，因此结果是浏览器什么都不做。
Secondly, to make the outer-div (in this case #innerPageWrapper) wrap around the child elements, you should use overflow:hiddenon this wrapper.
其次，要使外部 div（在本例中为#innerPageWrapper）环绕子元素，您应该overflow:hidden在此包装器上使用。
For this to successfully work, your child elements must notbe position:absoluteas you have for #contentMainand #contentSidebar, instead make these floats(float:leftand float:right) and after the #contentSidebardiv closes, add a <div style="clear:both"></div>to clear floats, allowing the parent to wrap around them perfectly.
对于这个成功的工作，你的子元素必须不能是position:absolute因为你有#contentMain和#contentSidebar，反而让这些浮动（浮动：左和浮动：右）和后#contentSidebarDIV关闭，添加<div style="clear:both"></div>到清晰的花车，使父母将它们完美地包裹起来。
I have put the required CSS in thisPastebin, note that you must clear your floats using a div as I mentioned above.
我已将所需的 CSS 放在此Pastebin 中，请注意，您必须使用上面提到的 div 清除浮动。
回答by Trace
Try setting width and height of the parent element to auto. Simplified example:
尝试将父元素的宽度和高度设置为自动。简化示例：
http://jsfiddle.net/kimgysen/8nWDE/
http://jsfiddle.net/kimgysen/8nWDE/
#innerPageWrapper {
width:auto;
height:auto;
background:red;
}
#innerPageWrapper p{
width: 100px;
height: auto;
margin: 10px auto;
background: yellow;
}
Edit:
编辑：
Check this fiddle for a more advanced example, including horizontal and vertical center: http://jsfiddle.net/kimgysen/8nWDE/1/
检查此小提琴以获得更高级的示例，包括水平和垂直中心：http: //jsfiddle.net/kimgysen/8nWDE/1/
The parent element will dynamically adapt to the bounds of the child elements.
You can also set dynamic width and height on child elements.
父元素将动态适应子元素的边界。
您还可以在子元素上设置动态宽度和高度。
.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;
}
