09月25, 2018

footer始终居于底部的css方案

footer始终居于底部,这个其实还是比较容易的。。做法无非是body相对定位(搞一个最小高度100%),footer绝对定位。

好像没什么问题,然而比如页面做了一个弹出层,这时候footer会发生抖动,原因就是footer绝对定位,且给了一个宽度100%。

要解决也容易,就是给footer的模块,加两个监听事件:scrollOpenscrollClose。在open的时候,将它的宽度用100%减去滚动条的宽度,close的时候设置回来即可。

然而可能我们还会有其他的一些需求,例如:headermain-containerfooter,页面总共这三层,然后希望main-container永远和footer的距离是某一个固定的值。

公司的一个大牛前端给了我一些启发,最终写了出来:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    body {
      padding: 60px 0 202px 0;
      box-sizing: border-box;
    }
    .header {
      height: 60px;
      margin-top: -60px;
      background: gray;
    }
    .container {
      min-height: 100%;
      margin-bottom: 40px;
      height: auto;
      width: 800px;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      background: yellow;
    }
    .footer {
      height: 162px;
      background: red;
    }
  </style>
</head>
<body>
  <div class="header"></div>
  <div class="container"></div>
  <div class="footer"></div>
</body>
</html>

一些说明:

  • body里面的padding,上边距是header的高度,下边距是footer高度 + 固定间距40
  • header需要margin-top: -60px,来回到最顶部
  • container容器要加上margin-bottom: 40px,间距大小

上面的代码能够兼容主流的浏览器及IE8+。

令我惊喜的是,居然IE8也能支持box-sizing,真是不可思议。

唯一不是太好的点在于这个代码的可扩展性不是太好。

有一个朋友QQ给我留言,丢了一个链接给我:Sticky Footer, Five Ways,看起来相当不错。

本文链接:www.my-fe.pub/post/footer-always-in-bottom-css.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。