是否可能有一个CSS网格……增大它的高度以动态适应父容器？ [重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了是否可能有一个CSS网格……增大它的高度以动态适应父容器？ [重复]相关的知识，希望对你有一定的参考价值。
此问题已经在这里有了答案：
这不是建议的类似问题的重复，因为其他问题未考虑网格容器。
我试图查看是否可以增加网格的高度以填充父容器的高度。
我尝试过的：
我已经尝试在网格容器和子div上设置100％的高度/最小高度。
100vh不是解决方案，因为它不是动态的。
我对如何执行此操作有些犹豫，如果可能的话。
对此非常感谢。谢谢！
我创建了一个CodePen，试图在这里解决这个问题：
https://codepen.io/fylzero/pen/bGGvBPa
<div class="flex">
<div class="grid">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>
</div>
CSS
html, body
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
.flex
display: flex;
padding: 10px;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
outline: 1px solid red;
.grid
display: grid;
padding: 10px;
height: 100%; /* THIS DOESN'T DO IT */
grid-template-columns: 1fr minmax(auto, 400px) minmax(auto, 800px) 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
outline: 1px solid green;
.grid div
padding: 10px;
outline: 1px solid blue;
答案
您是否试图将div在包装器内居中？如果是这样，只需对其应用justify-content: center。
这里正在起作用：
<head>
<style>
html, body
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
.flex
display: flex;
padding: 10px;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
outline: 1px solid red;
.grid
display: grid;
padding: 10px;
height: 100%; /* THIS DOESN'T DO IT */
grid-template-columns: 1fr minmax(auto, 400px) minmax(auto, 800px) 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
outline: 1px solid green;
.grid div
padding: 10px;
outline: 1px solid blue;
.wrapper
outline: 1px solid orange;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
justify-content: center;
</style>
</head>
<body>
<div class="flex">
<div class="wrapper">
<div class="grid">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>
</div>
</div>
</body>以上是关于是否可能有一个CSS网格……增大它的高度以动态适应父容器？ [重复]的主要内容，如果未能解决你的问题，请参考以下文章
在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度