獲取一個DIV包裝器，用CSS填充整個頁面

Question

我有一個由幾個DIvs，頂部的導航欄，底部的頁腳dv以及兩者之間的一個叫做#frame的包裝組成的佈局，以保存內容。

<div id="nav"> 
navbar 
</div> 

<div id="frame"> 
Content 
</div> 

<div id="footer"> 
(c) 2010 MySite.com 
</div> 

在#frame內容將明顯取決於頁面上，我想，以確保即使在#frame只有幾行，將填滿整個屏幕，並確保#footer的總是休息在頁面底部。嘗試height:100%最終會添加垂直滾動條，因爲頁眉和頁腳佔用了額外的高度，我一定希望避免這種情況。

我目前正在通過使＃frame的CSS高度達到89％來解決這個問題，但是我知道這是一個醜陋的黑客攻擊，如果我更改了頁眉和/或頁腳，它會中斷。任何人都知道一個更優雅的方式來完成這個？

Answer 1

如果您的頁腳很像示例中的那樣簡單，那麼您很幸運。當您知道頁腳的高度時，無論是px還是em，都可以將其定位在頁面的底部，並將頁腳的高度添加到#frame的底部填充中。如果頁腳非常流暢，那麼您將遇到麻煩，並且您所描述的佈局沒有適當的優雅解決方案（儘管Flexbox會在WebKit和Gecko上執行此操作;只是等待IE瀏覽器出現）。

Answer 2

我剛剛在這艘船上，檢查This Link了，看看是否有幫助。