sticky footer布局,定位底部footer

Posted wmui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sticky footer布局,定位底部footer相关的知识,希望对你有一定的参考价值。

其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sticky footer</title>
  <style type="text/css">
  /* 第一步设置盒子为满屏大小 */
    .box{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      overflow: auto;
      background: green;
    }
    /* 第二步子盒子设置最小高度且清除浮动 */
    .box .main{
      width: 100%;
      min-height: 100%;
    }
    .box .main .content{
      background: orange;
    }
    /* 第三步footer的高度和margin-top要相等 */
    .box .footer{
      position: relative;
      width: 100%;
      height: 100px;
      background: #f3f3f3;
      margin: -100px auto 0 auto;
      clear: both;
      text-align: center;
    }
    .clearfix{
      display: inline-block;

    }
    .clearfix::after{
      content: ".";
      display: block;
      height: 0;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="main clearfix">
      <div class="content">
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
      </div>
    </div>

    <div class="footer">这是footer区域</div>
  </div>
</body>
</html>

原理我不清楚,效果很完美

以上是关于sticky footer布局,定位底部footer的主要内容,如果未能解决你的问题,请参考以下文章

CSS Sticky Footer 实现的问题

Sticky Footer的实现

Sticky footer实现

sticky footer绝对底部的2种实现方法

两种方式实现sticky footer绝对底部

sticky footer 布局