flex如何实现头部固定，内容区域滚动？

codingfly

76912134205

发布于
2018-10-19

问题：类似PC端使用position:fixed能够实现的功能。

html5 css3 flex flexbox 前端

阅读 9.4k

3 个回答

得票最新

rolitter

7431113

发布于
2018-10-19

✓ 已被采纳

html,body{
      margin: 0;
      padding: 0;
    }
    .wrap{
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: hidden;
    }
    .head{
      height: 80px;
      background: #f00;
    }
    .footer{
      height: 80px;
      background: #fc0;
    }
    .content{
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: scroll;
    }
    .item{
      display: flex;
      height: 200px;
      flex-shrink: 0;
      background: #1ab394;
      margin-top: 10px;
    }

<div class="wrap">
    <div class="head">头部</div>
    <div class="content">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    <div class="footer">底部</div>
  </div>