时间戳

首页 > 解决方案 > 为什么文本离开网格框？

css - 为什么文本离开网格框？

问题描述

为什么网格框的大小不会根据字体大小而变化，因为当前当我放置 font-size:25; 时，页眉和页脚元素中的文本是开箱即用的？我需要将所有元素放入 div 中吗？如果您似乎确实为我解决了这个问题，请解释您为解决该问题所做的工作。谢谢你

: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;
   }
}  
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Clodio Pontes | CV</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<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>
</body>
</html>

标签： csscss-grid

解决方案

仅仅因为您对页眉和页脚使用了固定值，因此您有溢出grid-template-rows: 80px 1fr 70px。用函数替换固定值，minmax()以便在内容较大时调整高度

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

推荐阅读