CSS：固定在底部并居中
我需要将页脚固定在页面底部并居中。 页脚的内容可能会随时更改，所以我不能只通过margin-left将它居中：xxpx; margin-right：xxpx;
问题是，由于某种原因，这是行不通的：
#whatever { position: fixed; bottom: 0px; margin-right: auto; margin-left: auto; } 我爬网，没有发现任何东西。 我尝试了一个容器div和nada。 我尝试了其他组合和gurnisht。 我怎样才能做到这一点？
谢谢
你应该使用这样一个粘性页脚解决scheme：
* { 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 */ }
有这样的其他人;
* {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;}
用html：
<div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
Daniel Kanis修改的代码：
只需在CSS中更改以下几行即可
.problem {text-align:center} .enclose {position:fixed;bottom:0px;width:100%;}
和在HTML中：
<p class="enclose problem"> Your footer text here. </p>
一个jQuery解决scheme
$(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>
有时候实现JS比旧的CSS更容易。
有两个潜在的问题，我看到：
1 – IE遇到了问题：固定在过去。 如果您使用的IE7 +有效的文档types或非IE浏览器，这不是问题的一部分
2 – 如果要使页脚对象居中，则需要为页脚指定宽度。 否则，默认为页面的全部宽度，左右的自动边距设置为0.如果您希望页脚栏占据宽度（如StackOverflow通知栏）并居中文本，则需要将“text-align：center”添加到您的定义中。
问题在于position: static 。 静态意味着不要在这个位置上做任何事情。 position: absolute是你想要的。 居中元素仍然很棘手。 以下应该工作：
#whatever { position: absolute; bottom: 0px; margin-right: auto; margin-left: auto; left: 0px; right: 0px; }
要么
#whatever { position: absolute; bottom: 0px; margin-right: auto; margin-left: auto; left: 50%; transform: translate(-50%, 0); }
但我build议第一种方法。 我从这个答案使用定心技术： 如何中心绝对定位元素在div？
我已经装入了“另一个div的问题div”让我们把这个div封闭的div …使封闭的div在css有一个100％的宽度和固定的底部为0 …然后插入问题div封闭的div就是它的样子
#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/} #enclose {position:fixed;bottom:0px;width:100%;}
然后在HTML …
<div id="enclose"> <div id="problem"> <!--this is where the text/markup would go--> </div> </div>
有你去！
– 超文本
根据@Michael的评论：
有一个更好的方法来做到这一点。 只需创build位置：相对和填充页脚的大小+内容和页脚之间的空间，你想要的身体。 然后只是一个绝对的底部div和底部：0。
我去挖掘解释，并归结为这一点：
- 默认情况下，bottom：0px的绝对位置将其设置在窗口的底部，而不是页面的底部。
- 元素的相对定位重置了其子元素的绝对位置范围…因此通过将主体设置为相对定位，bottom：0px的绝对位置现在真正反映了页面的底部。
更多详情，请访问http://css-tricks.com/absolute-positioning-inside-relative-positioning/
