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