问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
google
    4139
    新手上路，请多包涵

    <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出现下拉

    csscss3htmlhtml5
    阅读 2.2k
    1 个回答
    得票最新
    头像
    D_Q_
      48316
      
  <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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题