修复了页眉/页脚 + 内容高度 100% 导致出现不需要的垂直滚动的问题

我正在尝试实现一个具有固定页眉和页脚的水平滚动网站。

目标： 1.固定页眉和页脚 2. 没有垂直滚动 3.内容div填充页眉和页脚之间的所有空间

我在内容上使用了position:absolute，以确保height:100%占据页眉和页脚之间的区域。 （我的第三个目标） 然而，这也会导致出现垂直滚动条。

现场演示：http://jsfiddle.net/wQ2XR/230/ http://jsfiddle.net/wQ2XR/230/

在不出现垂直滚动条的情况下如何实现我的目标？

预先非常感谢！

html代码：

    <div id="total">
        <header id="1">
            <div id="a">
                    <h1>Header</h1>

            </div>
        </header>

        <div id="2">
            <div id="b">
                <div id="bb">
                    <h2>Post Title Example One</h2> 
                <p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
                </div>
            </div>
        </div>
        <footer id="3">
            <div id="c">
                    <h1>footer</h1>

            </div>
        </footer>
    </div>

the css:

body, html {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    width: 100%;
}

header {
}

#a {
    position: fixed;
    height: 50px;
    top: 0;
    width: 100%;
    background-color: blue;
}

 #2 {
    position: relative;
    padding: 50px 0 25px 0;
}

#b {
    height: 100%;
    position: absolute;
}

#bb {
    position: relative;
    height: 100%;
    margin: 50px 0 0 0;
    width: 2000px;
    background-color: yellow;
}

 footer {
}

#c {
    position: fixed;
    height: 25px;
    bottom: 0;
    width: 100%;
    background-color: green;
}

嗯，问题是页眉和页脚之间的内容周围的包装器占用了视口的高度height:100%。因此，当您应用边距来垂直偏移这些内容包装器（以便标题变得可见）时，它们会被推到视口下方（50px，标题高度）。结果，您会得到一个垂直滚动条，因为内容包装器都是视口的完整高度and被推下 - 因此它们无法显示在屏幕上。

如何避免这种情况？好吧，如果你的页脚和页眉高度不是动态的（即你总是可以通过 CSS 控制它们的高度），你可以通过相当简单的方式实现这一点position:absolute.

我稍微修改了你的结构；我删除了#2 and #b元素，因为它们看起来只是为了正确定位/调整大小#bb，实际包含内容的元素：

<div id="total">
    <header id="1">
        <div id="a">
            <h1>Header</h1>
        </div>
    </header>
    <div id="bb">
        <h2>Post Title Example One</h2> 
        <p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
    </div>
    <footer id="3">
        <div id="c">
            <h1>footer</h1>
        </div>
    </footer>
</div>

现在，通过您的 CSS，我删除了样式定义#2 and #b。另外，我修改了#bbCSS 读作：

#bb {
    position: absolute;
    top: 50px;
    bottom: 25px;
    width: 2000px;
    background-color: yellow;
}

这是一个更新了 JSFiddle http://jsfiddle.net/wQ2XR/235/展示其所取得的成果。另外，这里有一个JSFiddle 实现多行布局 http://jsfiddle.net/wQ2XR/236/您在其中一个答案中作为评论给出的。

之所以overflow:hidden不太有效是因为#bb实际上仍然会延伸到视口下方 - 只是不会创建垂直滚动条，因为浏览器会忽略溢出区域。但是，当您使用百分比高度时，很明显#bb不是可见的。无论如何，希望这对您有所帮助！如果这不是您想要的，请告诉我，我很乐意为您提供进一步的帮助。祝你好运！