<body>
<container>
<nav></nav>
<main>
<section></section>
<section></section>
<section></section>
<section></section>
...
</main>
<footer></footer>
</container>
</body>
container {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
main {
margin: 0 auto;
position: relative;
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
下面的图像有一个额外的 border-style: dashed 附加到“section”元素。在 main 组中有一个或两个部分，一切都很好:
然而，对于三个或更多元素，它们会转到屏幕底部:
当您在屏幕上获得足够多的元素来填满一个 View 时，它似乎又可以工作了:
最佳答案
并不是最后一个元素与页面底部对齐，而是你定义的网格使得网格的第一“行”获得其内容的高度，第二个“行”被设置到 1fr(1fr 代表 1 个分数，可用空间的 1 个分数)，第三个“行”再次设置为自动。从第四个元素开始，没有“行”规则，因此默认设置为自动。
让我们考虑一下您的第三张图片。 因为你的标签有一个 css 规则“grid-template-rows: auto 1fr auto;” 第一个和第三个(以及第三个标签之后的每个元素)将具有自动高度，高度由标签的内容设置。 现在第二个元素，因为 1fr 规则总是占用剩余的可用空间。 这就是为什么您可以通过示例看到不是最后一个元素“粘”在底部，而是第二个元素总是占据剩余的可用空间。
希望这对您有所帮助 =]。 对我放轻松，这是我的第一个答案，希望收到所有反馈。
关于html - 为什么此网格中的第三个元素与页面底部对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59345147/