使用 CSS 网格在我的文档底部空白 space？

Question

CSS 菜鸟，运行遇到一个我似乎无法弄清楚的问题，我的 CSS 在底部创建空白 space文档，我会说大约 60%。是父参数还是子参数有问题？

我的HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Redacted</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div class="grid-container">
    <ul>
      <li><a href="about.asp">About</a></li>
      <li><a href="portfolio.asp">Portfolio</a></li>
      <li><a href="contact.asp">Contact</a></li>
      <li><a id="asides" href="asides.asp">Asides</a></li>
    </ul>

    <p class="intro">
      Bacon Ipsum
    </p>

    <p class="projects">
      Lorem Ipsum
    </p>

    <footer>Footer placeholder</footer>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  border: 1px solid gold;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #ffffff;
}

.intro {
grid-column: 1 / span 4;
grid-row: 2; 
}

.projects {
grid-column: 1 / span 4;
grid-row: 3;
}

footer {
grid-column: 1 / span 4;
grid-row: 4;
}


body {
  background-color: rgb(124, 252, 188);
  margin: 0;
  padding: 0;
}

请原谅糟糕的格式，暂时道歉，并提前感谢您！

Answer 1

您忘记在 body 和 grid-container

上添加 height

html,
body {
  height: 100%;
}

并在 grid-container

上添加 height

.grid-container {
    height: 100%;
    ...
}

CODEPEN

* {
  border: 1px solid gold;
}

html,
body {
  height: 100%;
}

body {
  background-color: rgb(124, 252, 188);
  margin: 0;
  padding: 0;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #ffffff;
}

.intro {
  grid-column: 1 / span 4;
  grid-row: 2;
}

.projects {
  grid-column: 1 / span 4;
  grid-row: 3;
}

footer {
  grid-column: 1 / span 4;
  grid-row: 4;
}

<div class="grid-container">
  <ul>
    <li><a href="about.asp">About</a></li>
    <li><a href="portfolio.asp">Portfolio</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a id="asides" href="asides.asp">Asides</a></li>
  </ul>

  <p class="intro">
    Bacon Ipsum
  </p>

  <p class="projects">
    Lorem Ipsum
  </p>

  <footer>Footer placeholder</footer>
</div>

使用 CSS 网格在我的文档底部空白 space？

Blank space at the bottom of my document using CSS grid?

html

css

css-grid