css设置头部底部固定，中间高度自适应效果

最新推荐文章于 2023-08-08 10:26:34 发布

青沐-

最新推荐文章于 2023-08-08 10:26:34 发布

阅读量286

点赞数

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

本文链接：https://blog.csdn.net/weixin_48295815/article/details/131208627

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css设置头部底部固定，中间高度自适应效果
效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .container{
    width:300px;
    height:200px;
    /* 设置竖向的弹性盒子 */
    display:flex;
    flex-direction: column;
    justify-content:space-between;
  }
  .top{
    background: pink;
    height:30px;
  }
  .center{
    background: powderblue;
    height:100px;
    /*y轴超出隐藏*/
    overflow-y:auto;
    /*让内容填充*/
    flex:1
  }
  .bottom{
    background:orchid;
    height:30px;
  }
</style>
<body>
  <div class="container">
    <div class="top">top</div>
    <div class="center">
      center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
    </div>
    <div class="bottom">bottom</div>
  </div>
</body>
</html>