孩子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

回答

相關問題