footer吸底效果css

最新推荐文章于 2024-01-18 14:46:19 发布

_花开富贵

最新推荐文章于 2024-01-18 14:46:19 发布

阅读量415

点赞数

分类专栏： css h5 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/sinat_42338962/article/details/129291217

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

需求场景就是当内容为空时候，footer置于最底部
内容超过页面长度时候，排在内容最后
demo

HTML：

<body>
  <div class="wrapper">
   <div class="content">
     <ul>
       <li>1.这是内容，这是内容……</li>
       <li>2.这是内容，这是内容……</li>
       <li>3.这是内容，这是内容……</li>
       <li>4.这是内容，这是内容……</li>
       <li>5.这是内容，这是内容……</li>
       <li>6.这是内容，这是内容……</li>
       <li>7.这是内容，这是内容……</li>
       <li>8.这是内容，这是内容……</li>
       <li>9.这是内容，这是内容……</li>
       <li>6.这是内容，这是内容……</li>
       <li>7.这是内容，这是内容……</li>
       <li>8.这是内容，这是内容……</li>
       <li>9.这是内容，这是内容……</li>
       <li>6.这是内容，这是内容……</li>
       <li>7.这是内容，这是内容……</li>
       <li>8.这是内容，这是内容……</li>
       <li>9.这是内容，这是内容……</li>
     </ul>
   </div>
   <div class="footer">底部按钮</div>
  </div>
</body>

CSS：

html,
body
  height 100%
.wrapper
  position relative // 关键
  box-sizing border-box
  min-height 100% // 关键
  .content
    padding-bottom: 100px
    ul
      list-style none
      li
        height 100px
        background lightblue
.footer
  position absolute // 关键
  bottom 0
  left 0
  right 0
  height 100px // 设置固定高度
  background orange