lycorisradiata

css解决页面不满一屏footer固定在底部
很多时候比如登录和注册页面,又或者是列表页面数据很少的情况下,我们是不希望底部footer跑到屏幕上方去的,而是希...
扫描右侧二维码阅读全文
01
2018/11

css解决页面不满一屏footer固定在底部

很多时候比如登录和注册页面,又或者是列表页面数据很少的情况下,我们是不希望底部footer跑到屏幕上方去的,而是希望固定在底部,但是当内容足够一屏幕时候,底部继续随着信息流往下走。
html 布局:

  <div class="box">
      <div class="section"></div>
      <div class="footer">这是底部</div>
  </div>

css 样式:

    body,html{
      height:100%;
    }//这一条很重要
    .box{
        min-height:100%;
        position:relative;
      }
     .section{
        padding-bottom:50px;
        height:200px;
        background:#ccc;
     }
     .footer{
        height:50px;
        background:#333;
        position:absolute;
        bottom:0;
        width:100%;
        color: #fff;
        text-align: center;
        line-height: 50px;
     }
Last modification:November 30th, 2018 at 03:59 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment