html - 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、正文和包含的 div 的高度设置为 100%。

但是，因为我有一个标题 Logo 和导航栏，所以它们下面的 div 没有按 100% 调整大小(我最终得到一个滚动条)。

如果我删除标题和导航栏 div，内容 div 的大小为 @ 100%，没有滚动条。

Answer 1

从 body 标签中删除高度。

html {
    height: 100%;
}

或者为 body 设置一个最小高度，如这篇文章所示:Make body have 100% of the browser height

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