CSS：固定在底部并居中

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要将页脚固定在页面底部并居中。页脚的内容可能随时更改，因此我不能仅通过margin-left居中：xxpx; 右边距：xxpx;

问题是由于某种原因这不起作用：

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

我爬网，一无所获。我试着做一个容器div和nada。我尝试了其他组合和gurnisht。我怎样才能做到这一点？

谢谢

回答：

您应该使用这样的粘性页脚解决方案：

* {
    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>

以上是 CSS：固定在底部并居中 的全部内容， 来源链接： utcz.com/qa/436355.html

回到顶部