将页脚保留在水平滚动的网站窗口底部

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，并使真正的页脚位于顶部： -（页脚的高度）

Answer 5

使用 Bootstrap CSS 类

class="fixed-top"