为什么网格框的大小不随字体大小而变化,因为当前当我输入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>
仅仅因为页眉和页脚使用了固定值,所以就有了溢出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>