CSS网格布局中重叠的行

Question

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

这就是我得到的：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

页脚（第3行）与文章（第2行）重叠，因为您在文章上有一个固定的高度：

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

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

grid-template-rows: 3.7rem auto auto

删除height规则后，重叠就会消失。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;