子div不扩展到父div [英] child div not expanding to parent div
问题描述
所以我有三个div
一个父母和两个孩子.
父级如下:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
两个子div如下
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
父div延伸100％，因为我可以看到它的边界，直到页面末尾，但child2却没有像父div那样向下延伸到页面末尾.
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
推荐答案
高度不符合您预期的方式.当您指定 height:100％时，该百分比是通过查找指定高度为 absolute 或 relative 定位.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
当涉及到身体标签时，您可以作弊，因此，如果您有这样的事情:
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
某些浏览器/版本将通过占用页面的总高度来达到您期望的方式.但是，如果您不进行任何深入的研究，它将无法正常工作.
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
这是我用来将div拉到页面底部的方法，它涉及绝对定位(关于这一点的妙处是它非常符合跨浏览器的要求，不需要JavaScript即可实现):
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
以下是用于演示的Jsfiddle: http://jsfiddle.net/t7ZpX/
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
诀窍:
当您指定绝对位置然后放入 bottom:0; 时，该元素将延伸到页面底部；您只需要担心将元素定位为折衷.
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
这篇关于子div不扩展到父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
