首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在CSS Grid中,如果总空间超过父级的100%,为什么显式行不能呈现?

在CSS Grid中,如果总空间超过父级的100%,为什么显式行不能呈现?
EN

Stack Overflow用户
提问于 2018-06-27 01:37:19
回答 1查看 190关注 0票数 6

使用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:

代码语言:javascript
复制
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技巧不适用于此内部网格。

EN

回答 1

Stack Overflow用户

发布于 2018-06-27 01:42:44

这是因为您已经将容器的高度限制为固定的100%。溢出将被剪裁。

此外,百分比高度不能像预期的那样处理网格行(参见下面的注释)。

要获得更简单、更强大的解决方案,请使用vh单元。

代码语言:javascript
复制
body {
  background-color: #ddd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20vh 100vh 20vh;
}

来自CSS Grid specification,关于grid-template-columnsgrid-template-rows

如果栅格容器的大小取决于其轨迹的大小,则必须将<percentage>视为auto

因此,如果释放固定的高度,并在容器上使用min-height: 100%,那么20% 100% 20%将确定容器的高度,计算结果为auto,并根据auto algorithm解析为三个相等的高度行。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51048661

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档