所以我查看了以下过去的问题，但我仍然无法弄清楚为什么会这样:
XHTML HTML element with 100% height causing scrollbars
Body height 100% displaying vertical scrollbar
这是我的 jsfiddle:http://jsfiddle.net/G4kgW/5/
CSS
body {
background-color:#ccc;
height:100%;
overflow:hidden;
}
div {
display:block;
position:relative;
}
html {
background-color:#f00;
height:100%;
overflow:hidden;
}
.uslt-wrapper {
height:100%;
overflow:auto;
width:100%;
}
.uslt-content {
background-color:#00f;
height:100%;
margin:0px auto;
width:90%;
}
.uslt-footer, .uslt-header {
background-color:#24427c;
height:68px;
width:100%;
}
.uslt-logo {
color:#fff;
height:68px;
margin:0px auto;
width:230px;
}
HTML
<div class="uslt-wrapper">
<div class="uslt-header">
<div class="uslt-logo">
<h1>Logo</h1>
</div>
</div>
<div class="uslt-content">
</div>
<div class="uslt-footer">
<div class="uslt-logo">
<h2>Logo</h2>
</div>
</div>
</div>
我正在尝试实现(没有 HTML5/CSS3)如果窗口对于页面来说太大，中间区域将扩展以占用额外空间的地方。
但我遇到了一个问题，无论窗口大小如何，我都会看到滚动条，即使当前没有内容，只有 CSS 样式。 (请注意 jsfiddle 链接有 CSS 重置)
最佳答案
你的类(class)，uslt-content , 继承 <HTML> 的 100% 高度元素，它具有视口(viewport)高度。所以.uslt-wrapper溢出。
一种可能的解决方案——让页眉和页脚重叠在内容之上(jsFiddle Demo):
.uslt-content {
background-color:#00f;
height:100%;
margin: -68px auto;
width:90%;
}
.uslt-footer, .uslt-header {
background-color:#24427c;
height:68px;
width:100%;
position: relative;
z-index: 1;
}
关于html - 100% 高度和奇怪的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17372711/