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>

粉色为需要被填满的，5个像素的padding更容易看清楚父级容器是粉色的
蓝色为固定的，或者是根据条件会被隐藏的
灰色高度可以根据容器高度剩余来调整，会自动充满粉色区域

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/17129978.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2023-02-17 14:18 echo_lovely 阅读(1093) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css 各种居中

· css的度量单位：px、em、rem、vh、vw、vmin、vmax、百分比

· div自动撑满剩余高度

· [css] 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？

公告

div剩余高度自动填充满

发表于 2023-02-17 14:18阅读：1093评论：0推荐：0

Html&Css Html&Css

关注

跳至底部

昵称： echo_lovely
园龄： 5年5个月
粉丝： 39
关注： 12

+加关注

随笔分类

随笔档案

文章分类

C#(1)

echo

div剩余高度自动填充满

这边采用弹性布局来处理

公告

echo_lovely

div剩余高度自动填充满

搜索

常用链接

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!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>