Html 将页脚保持在水平滚动的站点窗口底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6127621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keeping footer at the bottom of window on site that scrolls horizontal
提问by Brandon
I've got a completely horizontal scrolling site,
我有一个完全水平滚动的网站，
TopNav (fixed position)
TopNav（固定位置）
Nav (fixed position)
导航（固定位置）
Content (sideways scrolling)
内容（横向滚动）
Footer (fixed position)
页脚（固定位置）
Everything seems to be working great but the problem I have is that if the content is big enough to scroll horizontally, it puts the footer behind the horizontal scroll-bar, so on a few pages I made the #footer { bottom:16px } or so to take into account horizontal the scroll-bar being there.
一切似乎都很好，但我遇到的问题是，如果内容大到可以水平滚动，它会将页脚放在水平滚动条后面，所以在几页上我做了 #footer { bottom:16px } 或所以要考虑水平滚动条在那里。
What i'm having issues with is different monitor resolutions. Obviously the content will scroll horizontally or not based on the window size. Is there any way to keep the footer at the bottom (or above the horizontal scroll bar) NO MATTER WHAT resolution or window size?
我遇到的问题是不同的显示器分辨率。显然，内容将根据窗口大小水平滚动或不滚动。无论分辨率或窗口大小如何，有没有办法将页脚保持在底部（或水平滚动条上方）？
回答by Gerben Van Dijk
After a lot of trial and error, I found this to be the best solution for an always-on-the-bottom-footer:
经过大量反复试验，我发现这是始终在底部页脚的最佳解决方案：
HTML:
HTML：
<div class="footer">
<div class="footer_contents"></div>
</div>
CSS:
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;
}
回答by Dennis
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
The CSS
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;
}
And one simple CSS rule for IE 6 and IE 5.5:
还有一个适用于 IE 6 和 IE 5.5 的简单 CSS 规则：
#container {
height:100%;
}
回答by DanielB
There a two possibilities I see:
我看到有两种可能性：
1st OptionForce body to show the scroll bar always. But this may look strange.
第一个选项强制正文始终显示滚动条。但这可能看起来很奇怪。
body { overflow-x: scroll; }
2nd OptionHave your content container always above your footer. this is possible if your footer has a fixed height. Then you will have the scroll bar above your footer.
第二个选项让您的内容容器始终位于页脚上方。如果您的页脚高度固定，这是可能的。然后，您将在页脚上方看到滚动条。
<div id="contentWrapper">
<div id="content">Here comes your content</div>
</div>
And here the CSS i'll explain now
在这里我将解释 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;
}
The #contentWrapperhas to have an negative margin in scroll bar height plus your footer height. The #contenthas to have the same value as top padding, so your content at the top will not be out the page.
在#contentWrapper有有滚动条高度的负利润率加上你的页脚高度。在#content必须有相同的值的顶部填充，让你在上面的内容将不会出的页面。
回答by rk1s
My best idea would be to have the wide content as part of its own scrollable div. The footer would then stay in it's place at the bottom of the content, appearing to always be centered.
我最好的想法是将广泛的内容作为其自己的可滚动 div 的一部分。然后页脚将留在内容底部的位置，似乎总是居中。
If you want the scroll bars to not be above the footer, you can probably do something fancy with a div and some css, such as put an empty div the size of the footer below the wide content and make the real footer have top: -(the footer's height)
如果您希望滚动条不在页脚上方，您可以使用 div 和一些 css 做一些花哨的事情，例如在宽内容下方放置一个与页脚大小相同的空 div，并使真正的页脚具有顶部：- （页脚的高度）
