孩子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一样向下延伸到页面的末尾。

来源

2011-12-08 DemCodeLines

猜测，这是你正在尝试做什么： http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the -page-with-a-minimum-height – jmacinnes

不，我的第二个子div并不完全伸展到父级的高度，并且我输入的每一行都扩展了div。除此之外，div不会延长。 – DemCodeLines

身高并不像您预期的那样。当您指定height: 100%时，通过查找指定高度的所述元素的第一个父元素的DOM，计算出具有absolute或relative定位的DOM的百分比。

，当涉及到身体标记你可以欺骗，所以如果你有这样的事情：

<body> 
    <div style="height: 100%"> 
    </div> 
</body>

一些浏览器/版本将表现你承担整个页面的总高度期望的那样。但是当你走得比这更深时，它不会起作用。

这里是我用来将div拉伸到页面底部的方法，它涉及到绝对定位（关于这个的好处在于它非常适合跨浏览器，并且不需要JavaScript来关闭它）：

<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/

诀窍：

当您指定绝对定位，然后把在bottom: 0;引起元素延伸到TH e页面底部;您只需担心将元素定位为折衷。

来源

2011-12-08 04:12:47

是的，这是css中令人讨厌的事情之一。出于计算height的目的，min-height不被认为是“高度”。见http://jsfiddle.net/3raLu/3/。您需要在父div上有height: 100%以使孩子完整身高。或者，如果您可以将其置于绝对位置，那么它可以工作：http://jsfiddle.net/3raLu/6/。

来源

2011-12-08 04:24:20 ScottS

孩子DIV不会扩展到父DIV

回答

相关问题