美文网首页
“Sticky Footer”,多种实现

“Sticky Footer”,多种实现

作者: 一蓑烟雨任平生_cui | 来源:发表于2017-07-28 18:20 被阅读0次

    所谓“Sticky Footer”是一种网页效果。即:页面的内容不足以撑开整个屏幕的高度时,footer置于屏幕底部;当内容超过一屏时,footer会随着内容下移,在内容底部。
    如图:


    Sticky Footer

    html 布局如下:

     <div class="box">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
    

    css实现方案:

    方案一: absolute
    html,
    body {
      /* 关键  */
      height: 100%;
    }
    .box {
      width: 100%;
      min-height: 100%; /* 关键 */
      position: relative; /* 相对定位 */
    }
    .header {
      height: 100px;
    }
    .content {
      padding-bottom: 100px;
    }
    .footer {
      height: 100px;
      position: absolute; /* 绝对定位 */
      bottom: 0;
      left: 0; /* IE 需要加  */   
    }
    
    方案二: flex

    css代码

    html,
    body {
      /* 关键  */
      height: 100%;
    }
    .box {
      min-height: 100%; /* 关键 设置最小高度*/
      display: flex;
      flex-direction: column; /* 改变主轴方向 */
    }
    .header,
    .footer  {
      height: 100px;
    }
    .content {
      flex: 1;
      /* 自适应 */
    }
    
    方案三:flex、flex-shrink、margin-top、vh(css单位)
    .box {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .header {
      height: 100px;
      flex-shrink: 0;
    }
    .footer {
      height: 100px;
      /* 自动填满flex布局之后剩余的空间 */
      margin-top: auto;
      /* 子元素的缩小比例 默认为1: 空间不足时默认会缩小 */
      flex-shrink: 0;
    }
    
    方案四:flex、vh(css单位)
    .box{
      /* 关键 */
      min-height: 100vh;  
      display: flex;
      flex-direction: column;
    }
    .header,
    .footer {
      height: 100px;
    }
    .body{
      flex: 1;
    }
    
    方案五: min-height、calc
    .header,
    .footer {
      height: 100px;
    }
    .content {
      min-height: calc(100vh - 200px);
    }
    
    方案六:table
    html,
    body {
      height: 100%;
    }
    .box {
      display: table;
      width: 100%;
      min-height: 100%;
    }
    .header,
    .footer {
      height: 100px;
    }
    .content {
      display: table-row;
      height: 100%;
    }
    

    相关文章

      网友评论

          本文标题:“Sticky Footer”,多种实现

          本文链接:https://www.haomeiwen.com/subject/joyflxtx.html