我遇到了网格区域和内容溢出定义区域的一些问题。
在下面的代码中，您可以看到蓝色内容区域有足够的内容应该将绿色页脚向下推，但事实并非如此。
我认为这与 grid-template-rows 属性有关，但我不知道如何修复它。这可能吗？
我喜欢网格固有的灵活性，但这个问题让我难住了，似乎让一切都变得沮丧，这意味着我不能拥有比几个段落更大的内容!
我有以下内容:codepen.io example
* {
padding: 0;
margin: 0;
}
p {
margin: 10px 0;
}
a {
color: #191970;
text-decoration: none;
}
body {
/*background: linear-gradient(white, #e0f7ff);*/
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr 3fr 1fr;
grid-template-areas: "logo nav" "logo content" "aside content" "footer footer";
grid-gap: 10px;
font-family: 'Copse';
width: 100vw;
height: 100vh;
}
/*@media screen and (max-width: 480px) {
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 3fr 1fr;
grid-template-areas: "logo"
"nav"
"content"
"footer";
grid-gap: 10px;
}
}*/
header {
background-color: red;
grid-area: logo;
}
header img {
max-height: 100%;
max-width: 100%;
}
nav {
background-color: yellow;
grid-area: nav;
}
nav ul {
display: flex;
}
nav ul li {
list-style-type: none;
margin: 0 10px;
}
section {
background-color: blue;
grid-area: content;
}
aside {
background-color: grey;
grid-area: aside;
}
footer {
background-color: green;
grid-area: footer;
}<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Copse" rel="stylesheet">
</head>
<body>
<header>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/1024px-Circle_-_black_simple.svg.png" />
</header>
<nav>
<h2>systems</h2>
<div>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>
</nav>
<section>
<article>
<h2>terminal</h2>
<h3>logged 16-08-2017</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien dolor. Sed cursus nunc et erat efficitur, vel tempor purus sollicitudin. Etiam interdum volutpat felis ac pretium. In at mi sit amet arcu elementum luctus sit amet nec nibh. Integer
suscipit mauris libero, in pulvinar metus volutpat ut. Etiam fermentum nunc a fringilla lobortis. Integer aliquam ut sapien vel ullamcorper.
</p>
</article>
<article>
<h2>terminal</h2>
<h3>logged 15-08-2017</h3>
<img src="http://placehold.it/200x200" />
<p>
Fusce vulputate ligula felis, in laoreet eros hendrerit vel. Fusce urna velit, malesuada a scelerisque quis, mollis sed tortor. Morbi lobortis, ante sit amet placerat feugiat, nulla tortor pulvinar velit, a venenatis sem dui ac turpis. Quisque semper
quam euismod ipsum iaculis ullamcorper. Praesent quis lectus turpis. In a ipsum eleifend, pretium arcu vel, placerat arcu. Fusce vehicula tristique tempus. Mauris gravida orci sed nulla posuere euismod. Aenean posuere blandit cursus.
</p>
</article>
<div>
« Previous Page — Next Page »
</div>
</section>
<aside>
<h2>sub-systems</h2>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</aside>
<footer>
<a href="#">privacy policy</a>
<a href="#">terms & conditions</a> copyright © 2017
</footer>
</body>
</html>最佳答案
关于html - CSS Grid 中灵活的网格行高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45661334/