100％高度的div容器不能與頭工作

Question

見http://jsfiddle.net/oedev/pag7ahz2/

我有以下頁面佈局：

• CMAIN - 主頁容器
• cBanner - 旗幟容器
• cNavigation - 導航容器
• c內容 - 頁面內容容器

所有這些大小都爲100％，因爲我希望頁面內容的大小爲100％（除了橫幅）。

html, body { 
    height: 100%; 
} 

#cMain { 
    height: 100%; 
} 

#cBanner { 
    background: #002d62 top center no-repeat scroll; 
    height: 200px; 
    margin-bottom: 1em; 
    margin-top: 1em;  
} 

#cContent { 
    height: 100% 
} 

我已經設置了html，body和包含div的高度爲100％。

但是，因爲我有一個標題標誌和導航欄，這些div下的大小不是100％（我最後是一個滾動條）。

如果我刪除標題和導航欄div，則內容div的大小爲@ 100％，沒有滾動條。

Answer 1

從身體標記中移除身高。

html { 
    height: 100%; 
} 

或設置最低高度爲身體如圖這篇文章：Make body have 100% of the browser height

html { 
    height: 100% 
} 
body { 
    min-height: 100%; 
}