为什么文本离开网格框？

Question

为什么网格框的大小不随字体大小而变化，因为当前当我放置font-size：25;时，页眉和页脚元素中的文本已开箱？ 我是否需要将所有元素都放入div中？如果您确实为我解决了此问题，请说明您为解决此问题所做的工作。谢谢

ss_client.Sheets.add_rows(<sheet_id>,[new_row])

:root {
	--light: #666666;
	--dark: #000000;
}

body { 
	display: grid;
	grid-template-areas: 
	  "header header header"
	  "nav article article"
	  "footer footer footer";
	grid-template-rows: 80px 1fr 70px;  
	grid-template-columns: 20% 1fr 15%;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	height: 60em;
	margin: 0px;
	padding: 5px 25px 5px 25px;

	background-image: url(code.jpeg);
	background-size: cover;
	background-attachment: fixed;
}



header, footer, article, nav, div {
	padding: 1.2em;
	background: var(--light);
	opacity: 0.85;
	color:black;
	border-radius: 1.2em;
}

#pageHeader {
	grid-area: header;
	text-align: center;
	font-size: 24px;
}

#pageFooter {
	grid-area: footer;
	font-size: 25px;
	text-align: center;
}

#mainArticle { 
	grid-area: article;      
}

#mainNav { 
	grid-area: nav; 
}
  /* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
	body { 
	  grid-template-areas: 
		"header"
		"article"
		"nav"
		"footer";
	  grid-template-rows: 80px 1fr 70px 1fr 70px;  
	  grid-template-columns: 1fr;
   }
}  

Answer 1

仅因为您为页眉和页脚使用了固定值，所以您溢出了grid-template-rows: 80px 1fr 70px。用Embracing JUnit 5 with Eclipse函数替换固定值，以便在内容较大时调整高度。

:root {
	--light: #666666;
	--dark: #000000;
}

body { 
	display: grid;
	grid-template-areas: 
	  "header header header"
	  "nav article article"
	  "footer footer footer";
	grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content);  
	grid-template-columns: 20% 1fr 15%;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	height: 60em;
	margin: 0px;
	padding: 5px 25px 5px 25px;

	background-image: url(code.jpeg);
	background-size: cover;
	background-attachment: fixed;
}



header, footer, article, nav, div {
	padding: 1.2em;
	background: var(--light);
	opacity: 0.85;
	color:black;
	border-radius: 1.2em;
}

#pageHeader {
	grid-area: header;
	text-align: center;
	font-size: 24px;
}

#pageFooter {
	grid-area: footer;
	font-size: 25px;
	text-align: center;
}

#mainArticle { 
	grid-area: article;      
}

#mainNav { 
	grid-area: nav; 
}
  /* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
	body { 
	  grid-template-areas: 
		"header"
		"article"
		"nav"
		"footer";
	  grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content) 1fr minmax(70px,max-content);  
	  grid-template-columns: 1fr;
   }
}

<header id="pageHeader">
  <h1>header</h1>
</header>

<article id="mainArticle">Article</article>
<nav id="mainNav">
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>
<footer id="pageFooter">
  <p>MADE BY</p>
</footer>