将页脚保持在水平滚动的站点窗口底部答案

【问题标题】：Keeping footer at the bottom of window on site that scrolls horizontal将页脚保持在水平滚动的站点窗口底部
【发布时间】：2011-09-01 22:14:35
【问题描述】：

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

TopNav（固定位置）

导航（固定位置）

内容（横向滚动）

页脚（固定位置）

一切似乎都很好，但我遇到的问题是，如果内容足够大，可以水平滚动，它会将页脚放在水平滚动条的后面，所以在几页上我做了 #footer { 底部： 16px } 左右考虑水平滚动条在那里。

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

【问题讨论】：

你用的是什么浏览器？因为在 Firefox 中我无法重现您的问题。你可以给页脚一个 padding-bottom:16px;这样，scollbar 就不能阻止任何内容，如果滚动条不存在，则页脚下方没有 16px 的空白。
问题实际上在任何浏览器中。我的内容 div 横向滚动。如果内容横向滚动，则页脚隐藏在水平滚动之后，因此添加了底部：16px。如果内容不必横向滚动（意味着没有足够的内容来强制滚动），则页脚比应有的高 16 像素。
也可以看到：matthewjamestaylor.com/blog/…

标签： html css scroll sticky-footer

【解决方案1】：

我看到了两种可能性：

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

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 必须与顶部填充具有相同的值，因此顶部的内容不会出现在页面之外。

【讨论】：

【解决方案2】：

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

如果您希望滚动条不在页脚上方，您可以使用 div 和一些 css 做一些花哨的事情，例如在宽内容下方放置一个与页脚大小相同的空 div，并使真正的页脚具有顶部：-（页脚的高度）

【讨论】：

【解决方案3】：

经过大量试验和错误，我发现这是始终在底部页脚的最佳解决方案：

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;

}

【讨论】：

您的修复帮助了我！我还必须将页脚上方 div（主 div）的底部边距设置为大于页脚高度的值。这可以防止我的页脚在调整页面大小时超出正文内容。希望这可以帮助。 .main { padding: 0px 12px; margin: 12px 8px 40px 8px; min-height: 420; } .footer { font-family:Arial; font-size:13px; position: fixed; bottom: 0pt; left:0pt; width: 98%; background: #272727; color: #fff; text-align: right; height:26px; }
伟大的补充@dasariramacharanprasad :)

【解决方案4】：

<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%;
}

【讨论】：