div剩余高度自动填充满

这边采用弹性布局来处理

  • 在需要被填充满的div上设置display:flex;，然后根据你所需要填充宽度（flex-direction:column;）高度（flex-direction:row;）设置flex-direction
  • 然后用来填充的div上设置flex: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <div style="width:600px; height:300px; display:flex; flex-direction:column; background-color:pink;padding:5px">
    <div style="width:100%;height:50px; background-color: #a5ecff">
    </div>
    <div style="width:100%;background-color: #c9c9c9; flex: auto">
      
    </div>
  </div>
</body>
</html>
  1. 粉色为需要被填满的，5个像素的padding更容易看清楚父级容器是粉色的
  2. 蓝色为固定的，或者是根据条件会被隐藏的
  3. 灰色高度可以根据容器高度剩余来调整，会自动充满粉色区域
posted @ 2023-02-17 14:18  echo_lovely  阅读(898)  评论(0)  编辑  收藏  举报