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

新手上路,请多包涵

<div class="container">

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

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

阅读 2.1k
1 个回答

  <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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题