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