* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 30px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.grid-container {
height: 100vh;
border: 10px solid #14a76c;
display: grid;
grid-template-areas:
"header header header"
"nav main ads"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-auto-rows: max-content;
}
.grid-item {
background-color: #ccc;
border: 4px solid #ff652f;
/* padding: 20px; */
}
.item-1 {
grid-area: header;
}
.item-2 {
grid-area: nav;
}
.item-3 {
grid-area: main;
}
.item-4 {
grid-area: ads;
}
.item-5 {
grid-area: footer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Tutorial</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">item 1</div>
<div class="grid-item item-2">item 2</div>
<div class="grid-item item-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus nemo minus itaque rem odit a in ducimus accusantium? Architecto dolorum debitis nihil aliquam, explicabo aspernatur nostrum voluptate, sunt deserunt saepe tempore similique beatae quo iste quisquam eum alias quibusdam aut vitae. Quis, labore aspernatur ipsa tenetur voluptatibus earum cupiditate nihil odit nesciunt illo repellendus id ex eius dolor enim incidunt fugit, voluptate soluta iure placeat repellat error eos. Laboriosam, laudantium. Minima cum dolorem architecto perspiciatis dignissimos nihil exercitationem accusantium id nulla, hic, eos sed? Ipsam natus, ullam quasi harum laudantium quae mollitia omnis aspernatur quo voluptatem rerum aliquid id maiores impedit soluta! Fugit excepturi facilis nesciunt nobis, ab reiciendis, voluptates et quaerat qui nulla voluptate dolorum ipsum quo, officia earum assumenda. Delectus, deleniti porro sunt corporis maiores voluptates nulla harum omnis libero autem qui. Deserunt fugiat perspiciatis, quia quisquam, voluptates atque natus sint velit praesentium vitae unde voluptas nisi fugit dicta suscipit enim accusamus. Maxime pariatur consequatur repellat enim quidem esse, illo, distinctio facere et eius voluptatibus beatae libero, praesentium magnam accusantium omnis numquam! Sed sunt vero ut ad aperiam repellat accusamus quo sint hic quod debitis sequi temporibus autem beatae adipisci aliquid, officiis, a laborum quam tempora ex delectus.</div>
<div class="grid-item item-4">item 4</div>
<div class="grid-item item-5">item 5</div>
</div>
</body>
</html>所以我发现网格容器的边界可以很好地适应窗口的大小调整。
窗口大小调整扩展边界，我去
我的问题是，当内容太大，无法容纳一个屏幕时，我向下滚动查看其余内容，边框会停在100vh标记处，并且在向下滚动时不会延伸。它给人的印象是边界底部被内容重叠了。
无边界底部
我希望我的容器能包裹住孩子们，并生长/收缩以包裹里面的东西。
在.grid-container中将height: 100vh;更改为height: 100%;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 30px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.grid-container {
height: 100%;
border: 10px solid #14a76c;
display: grid;
grid-template-areas:
"header header header"
"nav main ads"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-auto-rows: max-content;
}
.grid-item {
background-color: #ccc;
border: 4px solid #ff652f;
/* padding: 20px; */
}
.item-1 {
grid-area: header;
}
.item-2 {
grid-area: nav;
}
.item-3 {
grid-area: main;
}
.item-4 {
grid-area: ads;
}
.item-5 {
grid-area: footer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Tutorial</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">item 1</div>
<div class="grid-item item-2">item 2</div>
<div class="grid-item item-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus nemo minus itaque rem odit a in ducimus accusantium? Architecto dolorum debitis nihil aliquam, explicabo aspernatur nostrum voluptate, sunt deserunt saepe tempore similique beatae quo iste quisquam eum alias quibusdam aut vitae. Quis, labore aspernatur ipsa tenetur voluptatibus earum cupiditate nihil odit nesciunt illo repellendus id ex eius dolor enim incidunt fugit, voluptate soluta iure placeat repellat error eos. Laboriosam, laudantium. Minima cum dolorem architecto perspiciatis dignissimos nihil exercitationem accusantium id nulla, hic, eos sed? Ipsam natus, ullam quasi harum laudantium quae mollitia omnis aspernatur quo voluptatem rerum aliquid id maiores impedit soluta! Fugit excepturi facilis nesciunt nobis, ab reiciendis, voluptates et quaerat qui nulla voluptate dolorum ipsum quo, officia earum assumenda. Delectus, deleniti porro sunt corporis maiores voluptates nulla harum omnis libero autem qui. Deserunt fugiat perspiciatis, quia quisquam, voluptates atque natus sint velit praesentium vitae unde voluptas nisi fugit dicta suscipit enim accusamus. Maxime pariatur consequatur repellat enim quidem esse, illo, distinctio facere et eius voluptatibus beatae libero, praesentium magnam accusantium omnis numquam! Sed sunt vero ut ad aperiam repellat accusamus quo sint hic quod debitis sequi temporibus autem beatae adipisci aliquid, officiis, a laborum quam tempora ex delectus.</div>
<div class="grid-item item-4">item 4</div>
<div class="grid-item item-5">item 5</div>
</div>
</body>
</html>或者保留height: 100vh;并添加overflow-y: scroll;，如果以上不是您想要的。
请参阅此处：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 30px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.grid-container {
height: 100vh;
overflow-y: scroll;
border: 10px solid #14a76c;
display: grid;
grid-template-areas:
"header header header"
"nav main ads"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-auto-rows: max-content;
}
.grid-item {
background-color: #ccc;
border: 4px solid #ff652f;
/* padding: 20px; */
}
.item-1 {
grid-area: header;
}
.item-2 {
grid-area: nav;
}
.item-3 {
grid-area: main;
}
.item-4 {
grid-area: ads;
}
.item-5 {
grid-area: footer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Tutorial</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">item 1</div>
<div class="grid-item item-2">item 2</div>
<div class="grid-item item-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus nemo minus itaque rem odit a in ducimus accusantium? Architecto dolorum debitis nihil aliquam, explicabo aspernatur nostrum voluptate, sunt deserunt saepe tempore similique beatae quo iste quisquam eum alias quibusdam aut vitae. Quis, labore aspernatur ipsa tenetur voluptatibus earum cupiditate nihil odit nesciunt illo repellendus id ex eius dolor enim incidunt fugit, voluptate soluta iure placeat repellat error eos. Laboriosam, laudantium. Minima cum dolorem architecto perspiciatis dignissimos nihil exercitationem accusantium id nulla, hic, eos sed? Ipsam natus, ullam quasi harum laudantium quae mollitia omnis aspernatur quo voluptatem rerum aliquid id maiores impedit soluta! Fugit excepturi facilis nesciunt nobis, ab reiciendis, voluptates et quaerat qui nulla voluptate dolorum ipsum quo, officia earum assumenda. Delectus, deleniti porro sunt corporis maiores voluptates nulla harum omnis libero autem qui. Deserunt fugiat perspiciatis, quia quisquam, voluptates atque natus sint velit praesentium vitae unde voluptas nisi fugit dicta suscipit enim accusamus. Maxime pariatur consequatur repellat enim quidem esse, illo, distinctio facere et eius voluptatibus beatae libero, praesentium magnam accusantium omnis numquam! Sed sunt vero ut ad aperiam repellat accusamus quo sint hic quod debitis sequi temporibus autem beatae adipisci aliquid, officiis, a laborum quam tempora ex delectus.</div>
<div class="grid-item item-4">item 4</div>
<div class="grid-item item-5">item 5</div>
</div>
</body>
</html>