2
定義された領域外にグリッド領域やコンテンツがオーバーフローする問題があります。CSS Gridの柔軟なグリッド行の高さ
下のコードでは、緑色のフッターを下方向に押す必要がある十分なコンテンツが青いコンテンツ領域に表示されていますが、それは表示されません。
私はそれがgrid-template-rowsプロパティと関係があると想定していますが、修正方法はわかりません。それも可能ですか？
私はグリッドの固有の柔軟性が大好きですが、この1つの問題は私を困惑させ、すべてのものを落としているように見えます。
私は次があります。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>
あなたが複数行にまたがる場合にのみ起こるようです。あなたのコンテンツがちょうど1つの行にある場合、それは何の問題もなくそれを押し下げます。私はこれを解決する方法もわかりません。 – wuppie367