使用CSS Grid,我试图创建一个(有时)比包含元素高度的100%
更多的网格。如何才能做到这一点?
当创建3行同时使用100%
的行时,显式网格显示得很好:
https://codepen.io/tommedema/pen/dKqwrZ?editors=1100#0
但是,如果前面的行占比超过100%,那么第三行就会突然消失,即使它是显式定义的:
https://codepen.io/tommedema/pen/jKvdOO?editors=1100#0
请注意,没有滚动条进一步下降40% (140 - 100),这是我所期望的。
已更新问题
当显式定义从第一行到最后一行到至少一个子级的grid-row
时,确实会显示溢出(和滚动条)。这很令人惊讶,因为我预计在没有这样的声明的情况下它也会溢出:
新CSS:
html, body {
height: 100%;
}
body {
background-color: #ddd;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20% 100% 20%;
}
/*
allows for row overflow to not be cropped
see also https://stackoverflow.com/questions/51048661
*/
body::after {
content: "";
grid-row: 1 / -1;
}
https://codepen.io/tommedema/pen/MXqRPW?editors=1100#0
更令人惊讶的是,当您将一个具有相同设置的网格放入此网格中时,::after
技巧不适用于此内部网格。
发布于 2018-06-27 01:42:44
这是因为您已经将容器的高度限制为固定的100%。溢出将被剪裁。
此外,百分比高度不能像预期的那样处理网格行(参见下面的注释)。
要获得更简单、更强大的解决方案,请使用vh
单元。
body {
background-color: #ddd;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 100vh 20vh;
}
来自CSS Grid specification,关于grid-template-columns
和grid-template-rows
如果栅格容器的大小取决于其轨迹的大小,则必须将
<percentage>
视为auto
。
因此,如果释放固定的高度,并在容器上使用min-height: 100%
,那么20% 100% 20%
将确定容器的高度,计算结果为auto
,并根据auto
algorithm解析为三个相等的高度行。
https://stackoverflow.com/questions/51048661
复制相似问题