为了账号安全,请及时绑定邮箱和手机立即绑定

如何使 CSS 网格容器始终填充可用的垂直空间

如何使 CSS 网格容器始终填充可用的垂直空间

智慧大石 2023-08-21 17:12:46
我有一个我遇到的问题的简化版本。我有一个容器,可以将物品放入其中。容器设置为display: grid,我希望它始终填充所有可用的垂直空间,无论其中有什么。为了便于说明,我这里有一个简单的 CodeSandbox。我的问题是:尽管设置了,为什么容器(灰色)没有填满所有可用空间height: 100%?(我也在height: 100vh这里尝试过,但最终也拉伸了里面的元素)当我从容器中取出某些东西时(即单击“删除卡”按钮),为什么它会缩小?<html>...<form id="form></form>...<script>let form = document.getElementById('form')form.addEventListener('submit',function(){})</script></html>
查看完整描述

2 回答

?
米脂

TA贡献1836条经验 获得超3个赞

如果要确保蓝色方块在网格中单独渲染时填充所有空间。你只需要给你的蓝色方块设置 100% 的宽度,然后让网格 css 处理剩下的事情。

查看完整回答
反对 回复 2023-08-21
?
慕田峪4524236

TA贡献1875条经验 获得超5个赞

更改容器上的以下内容(灰色)

    minHeight: "100vh",
    height: "auto"

和元素(蓝色)

maxHeight: "200px"


查看完整回答
反对 回复 2023-08-21
  • 2 回答
  • 0 关注
  • 94 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信