Question

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

在下面的代码中，您可以看到蓝色内容区域有足够的内容，可以向下推绿色页脚，但它没有。

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

我喜欢网格固有的灵活性，但是这个问题让我感到困惑，似乎对所有内容都有所挫折，这意味着我的内容不会超过几段！

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您将容器的height限制为100vh。

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

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

CSS Grid中灵活的网格行高

1 个答案: