2
我在网格区域和溢出所定义区域的内容方面存在一些问题。CSS Grid中的柔性网格行高度
在我的代码如下，你可以看到蓝色内容区域有足够的内容，应该向下推绿色页脚，但事实并非如此。
我认为这是与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) {
\t body {
\t \t display: grid;
\t \t grid-template-columns: 1fr;
\t \t grid-template-rows: 1fr 1fr 3fr 1fr;
\t \t grid-template-areas: \t "logo"
\t \t \t \t \t \t \t \t "nav"
\t \t \t \t \t \t \t \t "content"
\t \t \t \t \t \t \t \t "footer";
\t \t grid-gap: 10px;
\t }
}*/
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>
这似乎只有当你跨越多个行发生。如果你的内容只是一行，它会推下来没有任何问题。我不知道如何解决这个问题。 – wuppie367