参见 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%,没有滚动条。
最佳答案
从 body 标签中删除高度。
html {
height: 100%;
}
或者为 body 设置一个最小高度,如这篇文章所示:Make body have 100% of the browser height
html {
height: 100%
}
body {
min-height: 100%;
}
关于html - 100% 高度 div 容器不适用于标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31784313/