CSS css页脚位置粘在浏览器底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2571573/
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
css footer position stick to bottom of browser?
提问by brightmist.co.uk
I'm having a problem with my site http://artygirl.co.uk/pixie/about/I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background. Is there a solution better than using position:fixed or absolute?
我的网站有问题http://artygirl.co.uk/pixie/about/我似乎无法让页脚自动粘在浏览器的底部，并显示我的背景的其余部分。有没有比使用 position:fixed 或 absolute 更好的解决方案？
I think there are possibly other styles over-riding some tests I do in firebug.
我认为可能还有其他样式覆盖了我在 firebug 中所做的一些测试。
Thanks for your help Regards Judi
感谢您的帮助 问候朱迪
采纳答案by Steve
This is always a bit difficult, you could increase the min-heightof your content area, but even then if someone has a really big screen you'd see the same thing.
这总是有点困难，你可以增加min-height你的内容区域，但即使有人有一个非常大的屏幕，你也会看到同样的东西。
You could use a bit of JavaScript to increase the min-heightif someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
min-height如果有人有一个巨大的视口，你可以使用一些 JavaScript 来增加它，但这仍然不够优雅。我不确定是否有仅 CSS 的解决方案。
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult?may be of use to you.
如果你想尝试上面的代码，我刚刚在这里发布：使用 jQuery 检测滚动条是否仍然困难？可能对你有用。
回答by Boondog
CSS:
CSS:
.podbar {
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
}
HTML:
HTML:
<div class="podbar">
Put your footer here
</div>
This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5pxso it doesn't overlay your content.
这将创建一个始终显示在页面底部并覆盖所有内容的粘性。只需在主容器 div 的底部添加额外的边距/填充，等于页脚的高度，+5px这样它就不会覆盖您的内容。
Works in pretty much every browser I have tested.
几乎适用于我测试过的所有浏览器。
回答by roryf
I've used the technique in this article before: CSS layout: 100% height with header and footer. It does require some extra markup in your HTML.
我之前使用过本文中的技术：CSS 布局：100% 高度，带有页眉和页脚。它确实需要在您的 HTML 中添加一些额外的标记。
回答by digitaldreamer
Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest your footer with position: absolute, bottom: 0;
将html和body的高度设置为100%，插入一个最小高度为100%和相对位置的容器div，然后用position:absolute,bottom:0嵌套footer；
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
回答by Jaime Hablutzel
Here you have an example and explanation http://ryanfait.com/sticky-footer/
在这里你有一个例子和解释http://ryanfait.com/sticky-footer/
回答by Koen
Don't use position:absoluteuse position:relativeinstead.
不要使用position:absolute使用position:relative代替。
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
position: absolutewill stick it to the bottom of the screen while position relative won't ignore other divs, so it will stay at the bottom of the full page.
position: absolute将其粘贴到屏幕底部，而 position relative 不会忽略其他 div，因此它将停留在整个页面的底部。
回答by pokrate
I always prefer page wise footers because of variable content on pages. I use a top margin of 5em for my footers. Most often than not, we know the height of content that can occur on pages.
由于页面上的内容可变，我总是更喜欢页面明智的页脚。我的页脚使用 5em 的上边距。大多数情况下，我们知道页面上可能出现的内容高度。
回答by Rory O'Kane
If you use the Compasslibrary for Sass, there is also another option. You can use Compass's sticky-footer mixin(demo). It requires that the footer be fixed-height, and that your HTML has a certain general structure.
如果您为Sass使用Compass库，还有另一种选择。您可以使用 Compass 的粘性页脚 mixin( demo)。它要求页脚是固定高度的，并且您的 HTML 具有一定的通用结构。
回答by Josh
You could set a min-heighton #content. This won't fix the footer to the bottom of the browser specifically, but will ensure that you can always see a certain amount of the background.
你可以设置一个min-heighton #content。这不会专门将页脚固定到浏览器的底部，但会确保您始终可以看到一定数量的背景。
As an alternative, using JavaScript, you could determine the height of the browser window and then calculate the min-heightfor #content, and apply it using JavaScript. This would ensure the footer is always in the correct place.
作为替代方案，您可以使用 JavaScript 确定浏览器窗口的高度，然后计算min-heightfor #content，并使用 JavaScript 应用它。这将确保页脚始终位于正确的位置。
回答by brightmist.co.uk
I've figured it out. Html had a css property for the background saying the colour white.
我已经想通了。Html 有一个用于背景的 css 属性，表示颜色为白色。
