CSS 网格布局中重叠的行

Question

如何防止页脚行与内容行重叠？

这是我得到的：

body {
 display: grid;
 grid-template-rows: 3.7rem auto auto;
 grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
 grid-row: 1;
 grid-column: 2/4;
 
 background-color: green;
 height: 3rem;
}
*[role="main"] {
 grid-row: 2;
 grid-column: 2;
 background-color: yellow;
 height: 100px;
}
*[role="contentinfo"] {
 grid-row: 3;
 grid-column: 2/3;
 border-top: 1px solid black;
}
*[role="contentinfo"] img {
 height: 100px;
}

<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>

Answer 1

页脚（第 3 行）与文章（第 2 行）重叠，因为文章的高度固定：

[role="main"] { height: 100px; }

覆盖您在网格容器上指定的 auto 高度：

grid-template-rows: 3.7rem auto auto

删除 height 规则后，重叠部分将消失。

body {
 display: grid;
 grid-template-rows: 3.7rem auto auto;
 grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
 grid-row: 1;
 grid-column: 2/4;
 
 background-color: green;
 height: 3rem;
}
*[role="main"] {
 grid-row: 2;
 grid-column: 2;
 background-color: yellow;
 /* height: 100px; <-------- REMOVE */
}
*[role="contentinfo"] {
 grid-row: 3;
 grid-column: 2/3;
 border-top: 1px solid black;
}
*[role="contentinfo"] img {
 height: 100px;
}

<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>

CSS 网格布局中重叠的行

rows overlapping in CSS Grid Layout

html

css

grid-layout

css-grid