Question

这是我的代码：

    html, body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 8vh, 90vh, 2vh;
      grid-template-areas:
      "header"
      "main"
      "footer";
      text-align: center;
    }

    header {
      grid-area: header;
      /* min-height: 8vh; */
      background-color: green;
    }

    main {
      grid-area: main;
      /* min-height: 90vh; */
      background-color: blue;
    }

    footer {
      grid-area: footer;
      /* min-height: 2vh; */
      background-color: yellow;
    }

    .list-box {
      width: 40%;
      margin: auto;
      background: orange;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="./style.css">
      <title>Ever-List</title>
    </head>
      <body class="container">
        <header>
          <div>
            <h1>Ever List</h1>
          </div>
        </header>
        <main>
          <div class="list-box">
            <div>list1</div>
            <div>list2</div>
            <div>list3</div>
            <div>list4</div>
            <div>list5</div>
          </div>
        </main>
        <footer>© Maximilian Crosby</footer>
      <script href="script.js" type="text/javascript"></script>
      </body>
    </html>

为什么在这种情况下使用grid-template-row时，我的值会被忽略，而网格高度是内容的最小值？

如果我将width: 100%; height: 100%;添加到html，正文CSS类，则将三行平均分为窗口的三个部分。完全忽略grid-template-row。

如果我只是将高值添加到每个项目中，我就会得到想要的东西，但显然我不愿意这样做。

我想用三行填充窗口并分别调整每行的高度。我在这里想念什么？

谢谢！

Answer 1

我认为您的grid-template-rows语法错误。请参考此链接 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

为什么grid-template-row在这里什么也不做？

1 个答案: