固定页眉/页脚 + 内容高度 100% 导致不需要的垂直滚动

Question

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

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

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

现场演示： 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>

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;
}

Answer 1

嗯，问题在于页眉和页脚之间的内容周围的包装器使用height:100% 占据了视口的高度。因此，当您应用边距以垂直偏移这些内容包装器（以便标题变得可见）时，它们会被推到低于视口的位置（50 像素，标题的高度）。结果，您会得到一个垂直滚动条，因为内容包装器是视口的全部高度并且被向下推 - 所以它们无法适应屏幕。

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

我稍微修改了你的结构；我删除了#2 和#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 和 #b 的定义。此外，我将#bb CSS 修改为：

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

这里有一个updated JSFiddle 来展示它所取得的成果。此外，这是您在其中一个答案中作为评论提供的JSFiddle implementing your multiple-row layout。

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

Answer 2

要隐藏滚动条，请使用：

overflow: hidden;

但是，文本需要放在某个地方（否则它将被隐藏），因此您需要使容器更大或使用文本列。

您是否打算实现类似 Windows 8 Metro UI 的滚动功能？