html - 固定页眉/页脚 + 内容高度 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

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

如何避免这种情况？好吧，如果您的页脚和页眉高度不是动态的(即，您始终可以通过 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 实际上仍会延伸到视口(viewport)下方 - 只是，不会创建垂直滚动条，因为浏览器会忽略溢出区域。但是，当您使用百分比高度时，#bb 的高度显然不是可见的。无论如何，希望这对您有所帮助!如果这不是您想要的，请告诉我，我们很乐意进一步提供帮助。祝你好运!