我想在页面上有一个网格布局,其中网格延伸到整个视口,并且行具有最小高度。最简单的示例是具有单个单元格的网格(请参见下面的代码片段)。
我遇到的问题是,当视口的高度小于定义的最小行高时,该行垂直溢出其容器。通过在下面的示例中添加红色和绿色边框,可以看出行的高度不会低于定义的 500 像素,但网格容器的大小仍然适合视口,而视口现在短于 500 像素。
如果我删除height
CSS 属性来自grid
类,容器不会收缩到其内容以下,但当视口高于 500 像素时,它也不会填充垂直空间。因为我希望网格填满整个页面,所以我需要height
CSS 属性。我还添加了min-height: fit-content
属性应该阻止使用值height
属性变得小于指定的值min-height
但它不起作用(不适用于定义的fit-content
value - 例如,它按预期使用精确值工作300px
).
在类似的question https://stackoverflow.com/questions/63821011/css-grid-is-larger-than-its-container-div-in-height罪魁祸首是用于间隙的百分比值,但在这种情况下,没有任何相对大小的值。即使更换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>
我想要的是一个填充整个视口的网格,并且网格容器永远不会小于其内容。我缺少什么?
需要知道的是,只要一行的最小高度或多行的组合高度大于视口的高度,就会出现滚动。除此之外,我希望下面的代码片段能够满足您的需求。我在代码中添加了注释。
/* 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)