css與100％高度的困難

我正嘗試在左側創建一個面板。該面板有一個標題，一個內容區域和一個頁腳。主面板包裝div應該是頁面高度的100％。頁眉和頁腳沒有指定的高度，因爲我只希望它們對於文本和填充足夠大，而中心內容區域我希望是容器的100％減去頁眉和頁腳的高度。我不知道如何或如果我可以在CSS中做到這一點。任何人都知道該在這裏做什麼？謝謝。css與100％高度的困難

HTML頁面& CSS是在這裏 - https://gist.github.com/1641918

來源

2012-01-19 geoff swartz

見我的高度相關的問題在這裏：http://stackoverflow.com/questions/7391661/set-html-element-to-have-100-height-on-page-with-標題 –

您可以使用display作爲表來完成此操作。通過在內容「行」上設置100％的高度，然後在其他內容上設置0％。表格儘量使它們的行儘可能匹配指定的高度。

http://jsfiddle.net/PZALU/

html, body { height: 100%; width: 100%; } 
div#container { display: table; height: 100%; width: 100%;} 
div#container > div { display: table-row; } 
div#container > div > div { display: table-cell; border: 1px solid gray; } 
div#header { height: 0%; } 
div#content {height: 100%; background: lightgray; } 
div#footer { height: 0%; }

來源

2012-01-20 03:52:08 mrtsherman

非常感謝。那很棒！ –

我曾多次處理了這一點。它是可能的以我的經驗在一個或兩個特定情況下只用CSS。否則，您需要使用Javascript和CSS對它進行標記。因爲，爲了將元素設置爲100％高度，其父元素的高度必須減小。取決於元素的嵌套深度以及它可能或不可能擁有的兄弟元素的大小，將決定它是否可以單獨使用CSS。

獲取錐形容器div爲高度瀏覽器視口的100％的一種方法是通過以下樣式。

html { 
    height:100%; 
} 
body { 
    height:100%; 
} 
#container { 
    min-height:100%; 
    max-height:100%; 
} 

<html> 
<body> 
    <div id="container"> 
    ... 
    </div> 
</body> 
</html>

根據佈局它很容易變得棘手。

來源

2012-01-19 22:06:09 CSSDevMonkey

css與100％高度的困難

回答

相關問題