footer吸底效果css

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

_花开富贵

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

阅读量565

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/sinat_42338962/article/details/129291217

css 同时被 2 个专栏收录

4 篇文章

订阅专栏

2 篇文章

订阅专栏

该文章演示了一个HTML和CSS布局技巧，当内容区域（content）为空或者不足一屏时，footer始终保持在页面底部；而当内容超过页面长度时，footer会出现在内容的最后。通过使用相对定位和绝对定位，以及适当的min-height和padding-bottom属性，实现了这种效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求场景就是当内容为空时候，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