我的孩子div沒有繼承100％的高度

我有一些問題設置子div（contentwrapper）爲100％的高度，當父div（包裝）設置爲100％。我的孩子div沒有繼承100％的高度

有什麼想法爲什麼？

此佈局的目標是

100％頭固定LEFT，100％RIGHT 100％頁腳（但總是位於底部）

任何幫助表示讚賞。

感謝，

<form> 
<div id="wrapper"> 
<header> 
<div id="header">my header</div> 
</header> 
<div id="contentwrapper">some other items</div> 
<footer> 
<div id="footer">my footer</div> 
</footer> 
</div> 
</form> 


html, body, form { 
border: 0; 
margin: 0; 
height: 100%; 
_height: 100%; 
width: 100%; 
} 

#wrapper { 
    background-color: #DDDDDD; 
    height: auto !important; 
    height: 100%; 
    margin: 0; 
    min-height: 100%; 
    position: relative; 
    width: 100%; 
} 

#header { 
    height: 50px; 
    background-color: #666; 
    width: 100%; 
    _width: 100%; /* ie6 */ 
    z-index: 100; 
} 

#footer { 
    width: 100%; 
    background-color: #CCC; 
    position: absolute; 
    bottom: 0 !important; 
    bottom: -1px; 
    height: 40px; 
    clear: both; 
} 

#contentwrapper { 
    height: 100%; 
    min-height: 100%; 
    background-color: Yellow; 
}

來源

2011-10-16 Rick

我想指出的第一件事是造型的DIV或任何與CSS3一個好的經驗法則是永遠做它的類，所以你可以指定類多個元素，當重用它們以避免重複的代碼。 ID更適用於定位對象，並且如果探究到jQuery/JavaScript，將它們分開將會節省頭痛。

製作div 100％高度時需要做的事情是將元素html和body分配給height：100％。然後，身體內的任何物體必須將「最小高度」設置爲100％。高度不會做到這一點，它只是CSS的一個更奇怪的解決方法。看起來你有這個失敗，但重複的高度屬性是相互矛盾的，並且搞砸了一切。

頁腳不粘在頁面底部的問題是，您已將其絕對定位到底部。如果您將其更改爲固定，它將保持在瀏覽器窗口的底部。它的40px，所以記得添加40px的填充內容的底部，以避免覆蓋內容

此外，我看到你重置邊緣/填充你的CSS。一個好的工具是一個CSS重置樣式表，用於包含Eric Meyer製作的所有頁面。你可以在這裏找到它：

http://meyerweb.com/eric/tools/css/reset/

這將公平的競爭環境惱人的默認樣式在所有瀏覽器的各種屬性。

希望我明白你的問題，這有助於。

來源

2011-10-16 23:04:39 wwwroth

嗨菲利普，感謝您的指點。頁腳現在粘在底部，但它僅佔內容的高度，而不是導航。 – Rick

這裏是一個例子：http://www.onestopescape.com/webform2.aspx 我仍然有問題獲得100％身高的屬性的子div。我幾乎認爲不可能將div設置爲100％高度，當它設置爲相對位置時...當我將導航設置爲絕對位置時，然後將高度100％踢入，但它會將該導航視爲100％創建超出粘性頁腳的溢出。 – Rick

這很可能是這種情況。試試看看這個：http://www.cssstickyfooter.com/。這是一個插件，可以將頁腳推到屏幕底部並粘在那裏。也許你可以在那裏找到一些代碼來解決child div問題。 – wwwroth

我的孩子div沒有繼承100％的高度

回答

相關問題