1

所以我查看了以下过去的问题，但我仍然无法弄清楚为什么会这样：

具有 100% 高度的 XHTML HTML 元素导致滚动条

正文高度 100% 显示垂直滚动条

这是我的 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 重置）

4

1 回答 1

2

您的类 ,uslt-content继承了<HTML>具有视口高度的元素高度的 100%。所以.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;
}
于 2013-06-28T20:18:05.360 回答