上下三栏布局，中间自适应

<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>

</div>
这样的需求，bottom高度固定，固定到container底部,middle部分占据container所有剩余空间，middle内容多时会撑开container高度，container出现下拉

阅读 2.3k


  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      width: 100%;
      height: 100%;
    }

    .container {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      overflow: auto;
    }

    .top {
      width: 100%;
      height: 100px;
      background: #ccc;
      flex-shrink: 0;
    }

    .middle {
      display: flex;
      flex: 1;
      background: chartreuse;
    }

    .bottom {
      width: 100%;
      height: 100px;
      background: #000;
      flex-shrink: 0;
    }
  </style>
</head>

<body>
  <div class="container">

    <div class="top">top</div>
    <div class="middle"></div>
    <div class="bottom">bottom</div>
  </div>
</body>

上下三栏布局，中间自适应

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？