CSS 页脚位置 - 底部和中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5587740/
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
Footer position - bottom and center
提问by Daniel.P.
I am writing a webpage with a fixed footer on the bottom of the page. The content of the page has a specific width and is centered. The footer also has a specific width and must be centered.
我正在编写一个页面底部有固定页脚的网页。页面内容具有特定宽度并居中。页脚也有特定的宽度，必须居中。
Issues:
问题：
- I cant use
postiton: fixed- footer is not centered - Page content is loaded dynamically from a database, so I can't know the exact height
- If the browser window is very small, the footer hits the content and covers it. A
z-indexhardly fixes it because I have a gradient on the background set like a body background.
- 我无法使用
postiton: fixed- 页脚未居中 - 页面内容是从数据库动态加载的，所以我不知道确切的高度
- 如果浏览器窗口很小，页脚就会碰到内容并覆盖它。A
z-index很难修复它，因为我在背景上设置了一个渐变，就像身体背景一样。
So I would need something like float: bottom....
所以我需要像float: bottom......
回答by My Head Hurts
Although the other answers do work, you should avoid using negative margins.
尽管其他答案确实有效，但您应该避免使用负边距。
Try this:
尝试这个：
.footerholder {
background: none repeat scroll 0 0 transparent;
bottom: 0;
position: fixed;
text-align: center;
width: 100%;
}
.footer {
background: none repeat scroll 0 0 blue;
height: 100px;
margin: auto;
width: 400px;
}
And the HTML would be:
而 HTML 将是：
<div class="footerholder">
<div class="footer">
....
</div>
</div>
---------- Edit ------------
- - - - - 编辑 - - - - - -
You should also ammend your over all page size, as to take into consideration the height of your footer - otherwise you will never see the bottom content
您还应该修改整个页面的大小，以考虑页脚的高度 - 否则您将永远看不到底部内容
回答by Hussein
.footer{
position:fixed;
bottom:0;
left:50%;
margin-left:-200px; /*negative half the width */
background:red;
width:400px;
height:100px;
}
