开发者社区> 问答> 正文

网页主体内容高度不定,如何让footer在高度太低的时候固定在底下,长的时候被顶下去?

而且能不能用calc()实现,就不用js了?

展开
收起
杨冬芳 2016-06-08 10:19:13 1778 0
1 条回答
写回答
取消 提交回答
  • IT从业

    HTML:

    <div class="page-wrap">
      
      Content!
          
    </div>
    
    <footer class="site-footer">
      I'm the Sticky Footer.
    </footer>

    CSS:

    * {
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -142px; 
    }
    .page-wrap:after {
      content: "";
      display: block;
    }
    .site-footer, .page-wrap:after {
      height: 142px; 
    }
    .site-footer {
      background: orange;
    }
    2019-07-17 19:31:17
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
动态、高效,蚂蚁动态卡片的内核逻辑 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载