Question

我有一个完全水平的滚动网站，

TopNav（固定位置）

导航（固定位置）

内容（横向滚动）

页脚（固定位置）

一切看起来都很好但我遇到的问题是，如果内容足够大以便水平滚动，它会将页脚放在水平滚动条后面，所以在几页上我创建了#footer {bottom： 16px}左右要考虑水平滚动条在那里。

我遇到的问题是不同的显示器分辨率。显然，内容将根据窗口大小水平滚动或不滚动。有什么办法可以将页脚保持在底部（或水平滚动条上方）无论分辨率或窗口大小是什么？

Answer 1

经过大量的反复试验后，我发现这是一个始终在底层的最佳解决方案：

HTML：

<div class="footer">

    <div class="footer_contents"></div>

</div>

CSS：

.footer {

    height:24px; // Replace with the height your footer should be
    width: 100%; // Don't change
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 0pt;

}   

.footer_contents {

    height:24px; // Replace with the height your footer should be
    width: 1000px; // Visible width of footer
    margin:auto;

}

Answer 2

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}

IE 6和IE 5.5的一个简单的CSS规则：

#container {
    height:100%;
}

Answer 3

我看到了两种可能性：

第一个选项 强制身体始终显示滚动条。但这可能看起来很奇怪。

body { overflow-x: scroll; }

第二个选项 让您的内容容器始终位于页脚之上。如果您的页脚有一个固定的高度，这是可能的。然后你的页脚上方会有滚动条。

<div id="contentWrapper">
    <div id="content">Here comes your content</div>
</div>

这里的CSS我现在将解释

body, html {
    height: 100%;
    overflow: hidden;
}

#contentWrapper {
    overflow-x:auto;
    overflow-y: hidden;
    height: 100%;
    margin-top: -16px; // add the footer height
}

#content {
    padding-top: 16px; // add the footer height
    width: 6000px;
}

#contentWrapper滚动条高度加上页脚高度必须有负余量。 #content必须与顶部填充具有相同的值，因此顶部的内容不会超出页面。

Answer 4

我最好的想法是将广泛的内容作为其自己的可滚动div的一部分。然后页脚会留在内容底部的位置，看起来总是居中。

如果你想让滚动条不在页脚之上，你可以用div和一些css做一些奇特的事情，比如把一个空的div放在宽大内容下面的页脚大小并让真正的页脚有顶部： - （页脚的高度）

将页脚保持在滚动水平位置的窗口底部

4 个答案: