css-only動態高度頁腳100％div高度

我有一個三部分佈局：標題，內容和頁腳。我對絕對定位技術非常熟悉;當我想要內容div擴展到可用高度的100％時，我使用它很多。css-only動態高度頁腳100％div高度

在這種情況下，我的問題是，我不提前知道頁腳的高度，它是基於其自身內容的動態，它具有未知數量的行（通常在1到3行之間）。
我想要主要內容的div抓住100％的可用高度，考慮到標題的高度（這是固定的，所以這是一個無腦）和頁腳的高度，因此我不能使用絕對定位技術在這裏。

我有涉及JavaScript的解決方案，但我試圖找到一個只有css的解決方案。理想情況下，它應該是一個跨瀏覽器的解決方案（IE8，IE9，Chrome，Firefox和Safari）。

來源

2013-03-16 Yoni

心靈張貼的jsfiddle？ – luiges90 2013-03-16 13:38:43

發佈什麼？我沒有工作佈局來演示，它不像我有錯誤的佈局，我不明白爲什麼它會失敗 – Yoni 2013-03-16 13:40:07

這就是說，你有什麼嘗試？如果你嘗試了它並且失敗 - volia，那麼你有錯誤的佈局:) – luiges90 2013-03-16 13:40:31

試試這個

<!doctype html> 
<html> 
<body> 
<style> 
html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 

} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 

    background:#6cf; 
} 
</style> 
<div id="container"> 
    <div id="header">header</div> 
    <div id="body">body</div> 
    <div id="footer">footer</div> 
</div> 
</body> 
</html>

來源

2013-03-16 13:41:51

它不起作用，因爲頁腳是絕對定位的。它被取出正常流量，並且不會限制身體佔用的空間。此外，身體沒有伸展到100％的身高 – Yoni 2013-03-17 13:21:47

css-only動態高度頁腳100％div高度

回答

相關問題