我需要我的页脚固定在页面底部并居中.页脚的内容可能随时都会改变,所以我不能只通过左页边距:xxpx;右页边距:xxpx来居中.
问题是,出于某种原因,这不起作用:
#whatever {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
我在网上搜索,什么也没找到.我试着做了一个容器div,但一无所获.我试过其他的组合和枪.我怎么才能做到这一点呢?
谢谢
我需要我的页脚固定在页面底部并居中.页脚的内容可能随时都会改变,所以我不能只通过左页边距:xxpx;右页边距:xxpx来居中.
问题是,出于某种原因,这不起作用:
#whatever {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
我在网上搜索,什么也没找到.我试着做了一个容器div,但一无所获.我试过其他的组合和枪.我怎么才能做到这一点呢?
谢谢
您应该使用粘性页脚解决方案,如下所示:
* {
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>