如何使 CSS 网格容器始终填充可用的垂直空间
我有一个我遇到的问题的简化版本。我有一个容器，可以将物品放入其中。容器设置为display: grid，我希望它始终填充所有可用的垂直空间，无论其中有什么。
为了便于说明，我这里有一个简单的 CodeSandbox。我的问题是：
尽管设置了，为什么容器（灰色）没有填满所有可用空间
height: 100%？（我也在height: 100vh这里尝试过，但最终也拉伸了里面的元素）当我从容器中取出某些东西时（即单击“删除卡”按钮），为什么它会缩小？
<html>
...
<form id="form></form>
...
<script>
let form = document.getElementById('form')
form.addEventListener('submit',function(){})
</script>
</html>
智慧大石浏览 63回答 2
2回答
-
米脂
如果要确保蓝色方块在网格中单独渲染时填充所有空间。你只需要给你的蓝色方块设置 100% 的宽度，然后让网格 css 处理剩下的事情。 -
慕田峪4524236
更改容器上的以下内容（灰色） minHeight: "100vh", height: "auto"和元素（蓝色）maxHeight: "200px"
随时随地看视频慕课网APP
相关分类
Html5