所以我查看了以下过去的问题,但我仍然无法弄清楚为什么会这样:
具有 100% 高度的 XHTML HTML 元素导致滚动条
这是我的 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 重置)