CSS：固定到底部并居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/971123/
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: fixed to bottom and centered
提问by CamelCamelCamel
I need my footer to be fixed to the bottom of the page and to center it. The contents of the footer may change at all time so I can't just center it via margin-left: xxpx; margin-right: xxpx;
我需要将页脚固定在页面底部并将其居中。页脚的内容可能会随时更改，因此我不能仅通过 margin-left: xxpx; 将其居中。右边距：xxpx；
The problem is that for some reason this doesn't work:
问题是由于某种原因这不起作用：
#whatever {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
I crawled the web and found nothing. I tried making a container div and nada. I tried other combinations and gurnisht. How can I make this happen?
我在网上爬行，一无所获。我尝试制作一个容器 div 和 nada。我尝试了其他组合和 gurnisht。我怎样才能做到这一点？
Thanks
谢谢
采纳答案by marcgg
You should use a sticky footer solution such as this one :
您应该使用粘性页脚解决方案，例如：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
There are others like this;
还有其他类似的；
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
with the html:
使用 html：
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
回答by malsony
revised code by Daniel Kanis:
Daniel Kanis修改后的代码：
just change the following lines in CSS
只需更改 CSS 中的以下几行
.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}
and in html:
并在 html 中：
<p class="enclose problem">
Your footer text here.
</p>
回答by Thilo Savage
A jQuery solution
一个 jQuery 解决方案
$(function(){
$(window).resize(function(){
placeFooter();
});
placeFooter();
// hide it before it's positioned
$('#footer').css('display','inline');
});
function placeFooter() {
var windHeight = $(window).height();
var footerHeight = $('#footer').height();
var offset = parseInt(windHeight) - parseInt(footerHeight);
$('#footer').css('top',offset);
}
<div id='footer' style='position: fixed; display: none;'>I am a footer</div>
Sometimes it's easier to implement JS than to hack old CSS.
有时，实现 JS 比破解旧的 CSS 更容易。
回答by AccidentalTaylorExpansion
The problem lies in position: static. Static means don't do anyting at all with the position. position: absoluteis what you want. Centering the element is still tricky though. The following should work:
问题在于position: static。静态意味着不要对位置做任何事情。position: absolute是你想要的。尽管如此，将元素居中仍然很棘手。以下应该工作：
#whatever {
position: absolute;
bottom: 0px;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
}
or
或者
#whatever {
position: absolute;
bottom: 0px;
margin-right: auto;
margin-left: auto;
left: 50%;
transform: translate(-50%, 0);
}
But I recommend the first method. I used centering techniques from this answer: How to center absolutely positioned element in div?
但我推荐第一种方法。我使用了这个答案中的居中技术： How to center absolutelocated element in div?
回答by Daniel Kanis
I have encased the 'problem div in another div' lets call this div the enclose div... make the enclose div in css have a width of 100% and postion fixed with a bottom of 0... then insert the problem div into the enclose div this is how it would look
我已经将“问题 div 包含在另一个 div 中”让我们称这个 div 为 enclose div...使 css 中的 enclose div 的宽度为 100% 并且位置固定为 0 的底部...然后将问题 div 插入封闭 div 这是它的外观
#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}
then in html...
然后在 html...
<div id="enclose">
<div id="problem">
<!--this is where the text/markup would go-->
</div>
</div>
There ya go!
-Hypertextie
有你去！
-超文本
回答by Rob Allen
There are 2 potential issues that I see:
我看到了两个潜在的问题：
1 - IE has had trouble with position:fixed in the past. If you are using IE7+ with a valid doctype or a non-IE browser this isn't part of the problem
1 - IE 曾经有过定位问题：过去已修复。如果您使用带有有效文档类型的 IE7+ 或非 IE 浏览器，这不是问题的一部分
2 - You need to specify a width for the footer if you want the footer object to be centered. Otherwise it defaults to the full width of the page and the auto margin for the left and right get set to 0. If you want the footer bar to take up the width (like the StackOverflow notice bar) and center the text, then you need to add "text-align: center" to your definition.
2 - 如果您希望页脚对象居中，则需要为页脚指定宽度。否则它默认为页面的全宽，左右的自动边距设置为 0。如果您希望页脚栏占据宽度（如 StackOverflow 通知栏）并使文本居中，那么您需要将“文本对齐：居中”添加到您的定义中。
回答by lmsurprenant
Based on the comment from @Michael:
根据@Michael 的评论：
There is a better way to do this. Simply create the body with position:relative and a padding the size of the footer + the space between content and footer you want. Then just make a footer div with an absolute and bottom:0.
有一种更好的方法可以做到这一点。只需创建带有 position:relative 的 body 和页脚大小的填充 + 您想要的内容和页脚之间的空间。然后只需制作一个带有绝对和底部的页脚div：0。
I went digging for the explanation and it boils down to this:
我去寻找解释，归结为：
- By default, absolute position of bottom:0px sets it to the bottom of the window...not the bottom of the page.
- Relative positioning an element resets the scope of its children's absolute position...so by setting the body to relative positioning, the absolute position of bottom:0px now truly reflects the bottom of the page.
- 默认情况下，bottom:0px 的绝对位置将其设置为窗口底部......而不是页面底部。
- 相对定位元素会重置其子元素绝对位置的范围……因此通过将主体设置为相对定位，bottom:0px 的绝对位置现在真正反映了页面的底部。
More details at http://css-tricks.com/absolute-positioning-inside-relative-positioning/
更多详情请访问http://css-tricks.com/absolute-positioning-inside-relative-positioning/
回答by Firas Omrane
here is an example using css grid.
这是一个使用 css 网格的示例。
html, body{
height: 100%;
width: 100%;
}
.container{
height: 100%;
display:grid;
/*we divide the page into 3 parts*/
grid-template-rows: 20px auto 30px;
text-align: center; /*this is to center the element*/
}
.container .footer{
grid-row: 3; /*the footer will occupy the last row*/
display: inline-block;
margin-top: -20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
here is the footer
</div>
</div>
</body>
</html>you can use css grid:a concrete example
您可以使用 css 网格：一个具体的例子
