3

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

目标： 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;
}
4

2 回答 2

4

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

如何避免这种情况？好吧，如果您的页脚和页眉高度不是动态的（即，您将始终通过 CSS 控制它们的高度），您可以使用position:absolute.

我稍微修改了你的结构；我删除了#2and#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. 此外，我将#bbCSS 修改为：

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

这是一个更新的 JSFiddle来演示它所取得的成果。此外，这是一个JSFiddle 实现了您在其中一个答案中作为评论提供的多行布局。

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

于 2013-08-13T17:59:36.673 回答
-2

要隐藏滚动条，请使用：

overflow: hidden;

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

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

于 2013-08-13T13:51:54.873 回答