CSS 网格中灵活的网格行高

Question

我遇到了网格区域和内容溢出定义区域的问题。

在我下面的代码中，您可以看到蓝色内容区域有足够的内容应该将绿色页脚向下推，但事实并非如此。

我认为它与 grid-template-rows 属性有关，但我不知道如何解决它。有可能吗？

我喜欢网格固有的灵活性，但是这个问题让我很困惑，似乎让所有事情都变得沮丧，这意味着我不能拥有比几段更大的内容！

* {
  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 &amp; conditions</a> copyright &copy; 2017
  </footer>
</body>

</html>

Answer 1

您的容器 height 限制为 100vh。

如果您希望容器随内容展开，请改为使用 min-height: 100vh。

https://codepen.io/anon/pen/NvvZNL

CSS 网格中灵活的网格行高

Flexible grid row heights in CSS Grid

html

css

css-grid