100% 高度的 div 容器不适用于标题

Question

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

我有以下页面布局：

• cMain - 主页容器
• cBanner - 横幅容器
• cNavigation - 导航容器
• cContent - 页面内容容器

所有这些都设置为 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

从body标签中移除高度。

html {
    height: 100%;
}

或者如本文所示为身体设置一个最小高度：Make body have 100% of the browser height

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