Question

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

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

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

如何在没有垂直滚动条的情况下实现目标？

提前多多感谢！

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%视口的高度。因此，当您应用边距来垂直偏移这些内容包装器（以便标头变得可见）时，它们会被视口下方（50px，标题的高度）推动。因此，您会得到一个垂直滚动条，因为内容包装器都是视口和的全部高度 - 因此它们无法适合屏幕。

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

我的结构略有修改;我删除了#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，你在其中一个答案中作为评论给出了。{/ p>

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

Answer 2

隐藏滚动条使用：

overflow: hidden;

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

您是否打算为滚动实现类似Windows 8 Metro UI的内容？

固定页眉/页脚+内容高度100％导致不希望的垂直滚动

2 个答案: