我想在页面上有一个网格布局,其中网格延伸到整个视口(viewport),并且行具有最小高度。最简单的示例是具有单个单元格的网格(参见下面的代码片段)。
我遇到的问题是,当视口(viewport)的高度小于定义的最小行高时,该行会垂直溢出其容器。通过在下面的示例中添加红色和绿色边框,可以看出行的高度没有低于定义的 500 像素,但网格容器的大小仍然适合现在小于 500 像素的视口(viewport)。
如果我删除 height
来自 grid
的 CSS 属性类,容器不会收缩到其内容以下,但当视口(viewport)高于 500 像素时,它也不会填充垂直空间。因为我想让网格填满整个页面,所以我需要 height
CSS 属性。我还添加了 min-height: fit-content
应该防止 height
的使用值的属性属性变得小于为 min-height
指定的值但它不起作用(不适用于定义的 fit-content
值 - 它按预期使用精确值工作,例如 300px
)。
在类似的question罪魁祸首是用于间隙的百分比值,但在这种情况下没有相对大小。即使更换 grid-template-rows: minmax(500px, 1fr);
属性固定grid-template-rows: 500px;
, 它的行为方式仍然相同。
body {
margin: 0;
}
.grid {
display: grid;
grid-template-rows: minmax(500px, 1fr);
height: 100vh;
min-height: fit-content;
width: 100vw;
}
.bordered {
border: 10px solid green;
}
<div class="grid bordered" style="border-color: red;">
<div class="bordered">Some content</div>
</div>
我想要的是一个填满整个视口(viewport)并且网格容器永远不会小于其内容的网格。我错过了什么?
最佳答案
需要知道的是,只要一行的最小高度或多行的组合高度大于视口(viewport)的高度,就会出现滚动。除此之外,我希望下面的代码片段能满足您的需求。我在代码中添加了注释。
/* lines I added */
*{
box-sizing: border-box;
}
body {
margin: 0;
}
.grid {
display: grid;
/* 100 is for the small viewport here in the code snippet */
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
min-height : 100vh;
}
.bordered {
border: 10px solid green;
}
<div class="grid bordered" style="border-color: red;">
<div class="bordered">Some content</div>
</div>
关于html - CSS 网格行垂直溢出其容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70994786/