Question

我继承了一个我不习惯的div布局的网站：

<html>
    <body>
        <div class="wrap">...</div>
        <nav>...</nav>
        <div class="wrap">...<!-- main stuff -->...</div>
        <footer>
            <div class="wrap">...</div>
        </footer>
    </body>
</html>

其中一个页面内容很少，因此需要粘性页脚。通常我会在CSS中使用http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/之类的东西并设置100％等等。

我真的不想重写网站的结构。是否有另一种方法可以将页脚放到屏幕底部，同时保留这种“包装”类结构？

Answer 1

您可以使用附加链接中的相同CSS，只需将#footer替换为页脚，因为您的结构中已经有元素。如果有更多的元素使用body＆gt; footer。

所以这样的事情（取自你附加的链接只有一个修改）：

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #ee5;
}

如果你想修改只是页脚.wrap div使用页脚＆gt; .wrap

Answer 2

您可以先包装所有内容，然后将页脚从包装中删除

<html>
<body>
   <div class="wrap-all">
    <div class="wrap">...</div>
    <nav>...</nav>
    <div class="wrap">...<!-- main stuff -->...</div>
    <footer>
        <div class="wrap">...</div>
    </footer>    
  </div>
</body>    
</html>

然后是风格：

 html, body {
 height: 100%;
 }
.wrap-all {
 min-height: 100%;
 /* equal to footer height */
 margin-bottom: -142px; 
 }
 .wrap-all:after {
  content: "";
  display: block;
  }
 footer {
 /* .push must be the same height as footer */
 height: 142px; 
 }

粘性页脚，但有多个同类包装

2 个答案: