Question

在研究纯CSS方法之后，粘贴＆＃34;我的页脚，我不知所措。这是我网站上的布局结构：

<html> 
<body class="pages">
<div id="global" class="global">
<div class="pusher">

<header class="fixed"></header>
<section id="content"></section>
<div id="footerbottom"></div>

</div>
</div>
</body>
</html>

我尝试了一些成功的是添加

min-height: 100vh;

到＆＃34;内容＆＃34;部分，但它还不够好。

有什么建议让<div id="footerbottom"></div>坚持到底？

Answer 1

您可以将纯CSS用于： position: absolute 和 bottom:0px 。

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 150px;
}
#footerbottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 150px;
    width: 100%;
    background-color:red;
    text-align:center;
}

这是小提琴：http://jsfiddle.net/X2NqX/332/

或像Bootstrap这样的框架可以轻松实现：https://getbootstrap.com/examples/sticky-footer/

Answer 2

这是我们遇到的一个非常普遍的问题;我邀请您查看此http://ryanfait.com/sticky-footer/

知道你必须重新格式化整个HTML，但到目前为止我认为这是最好的解决方案。

或者最终正如之前所说的那样，你可以使用Bootstrap解决方案 - 对于我来说 - 并不是真的针对每个案例进行了优化，但可以在你的工作中使用。

Answer 3

试一试。我认为这比使用绝对定位更好，特别是在制作响应式网站时。

<body class="pages">
   <div id="global" class="global">
     <header class="fixed"></header>
     <section id="content"><p>
       content<br>
       content
     </p></section>
   </div><!--end global-->

   <div id="footerbottom">The footer</div>

</body>

CSS：

html, body {
  height: 100%;
}

#global {
  min-height: 100%;
}

#content {
  overflow:auto;
    padding-bottom: 150px;  /* must be same height as the footer */
}

#footerbottom, #global:after {
  height: 100px; 
}

#global:after {
  content: "";
  display: block;
}

#footerbottom {
  background: red;
  position: relative;
  margin-top: -100px; /* negative value of footer height */
  height: 100px;
  clear:both;
}

在这里查看小提琴：https://jsfiddle.net/tpbt60ff/

此处有更好的解释：http://www.cssstickyfooter.com/using-sticky-footer-code.html

如何创建一个＆＃34; sticky＆＃34;页脚？

3 个答案: