css position: sticky；实现上下粘性布局，中间区域滚动

九段刀客 • 2023年08月08日 04:06 • 1年前 • 编程日记 • 阅读(1) • 违法举报

sticky主要解决的问题

1、使用absolute和fixed中间区域需要定义高度
2、使用absolute和fixed底部需要写padding-bottom 避免列表被遮挡住一部分（底部是浮窗的时候，需要动态的现实隐藏）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap{
      display: flex;
      flex-direction: column;
    }
    header{
      height: 100px;
      background-color: red;
      position: sticky;
      top:0;
    }
    ul{
      flex:1;
    }
    li{
      height: 100px;
      margin-bottom: 18px;
      background-color: pink;
    }
    footer{
      position: sticky;
      bottom: 0;
      height: 100px;
      background: blue;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      头部
    </header>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1444</li>
    </ul>
    <footer>底部</footer>
  </div>
</body>
</html>

文章来源地址https://uudwc.com/A/OnROJ

原文地址:https://blog.csdn.net/weixin_35958891/article/details/132052421

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请联系站长进行投诉反馈，一经查实，立即删除！