防止行填满网格容器的高度

Question

类似的\xe2\x80\x94但不完全\xe2\x80\x94问题已被提出。在设置为最小高度的容器中，网格中的行是 1) 隐式的，2) 垂直扩展到容器的高度。我希望每个元素都有其自然高度。

\n

在这个CodePen中你可以明白我的意思。如果容器的高度：80vh被删除，元素将恢复其自然高度，但我的页脚会从门户底部向上移动。

\n

不知道这里发生了什么。想法？

\n

\r\n

\r\n

* {\n  margin: 0;\n}\n\nmain.chapter {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  max-width: 600px;\n  margin: 20px auto;\n  border: 1px solid #999;\n  min-height: 80vh;\n}\n\n.column {\n  grid-column: 1 / 5;\n  background: beige;\n  border: 1px solid #999;\n}\n\nform {\n  grid-column: 1 / 3;\n  background: beige;\n  border: 1px solid #999;\n}\n\n.table-list {\n  grid-column: 1 / 4;\n  background: beige;\n  border: 1px solid #999;\n}\n\nfooter {\n  background-color: tan;\n  width: 100%;\n  padding: 30px;\n  min-height: 200px;\n}

\r\n

<main id="primary" class="chapter" itemprop="page">\n\n  <div class="column">\n    <h1>Test Page</h1>\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. </p>\n\n    <p>Below are links to a number of homilies preached at New Melleray and Our Lady of the Mississippi by members of our community.</p>\n    </p>\n  </div>\n\n  <form>\n    <p>Name: <br><input type="text"></p>\n    <p>Gender: <br><input type="text"></p>\n    <p>Age: <br><input type="text"></p>\n    <p>Email: <br><input type="text"></p>\n  </form>\n\n  <div class="table-list">\n    <table>\n      <tr>\n        <tr>\n          <td>Suspendisse tortor ligula</td>\n        </tr>\n        <tr>\n          <td>Suspendisse tortor ligula</td>\n        </tr>\n      </tr>\n    </table>\n  </div>\n\n</main>\n\n<footer id="colophon" class="site-footer">\n</footer>

\r\n

\r\n

\r\n

\n

Answer 1

隐式行的默认设置是，grid-auto-rows: auto这将导致行消耗相等的空间。

使用 覆盖默认值grid-auto-rows: min-content。

将其添加到您的代码中：

main.chapter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #999;
    min-height: 80vh;
    grid-auto-rows: min-content; /* NEW */
}

main.chapter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #999;
    min-height: 80vh;
    grid-auto-rows: min-content; /* NEW */
}

* {
  margin: 0;
}

main.chapter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #999;
  min-height: 80vh;
  grid-auto-rows: min-content; /* NEW */
}

.column {
  grid-column: 1 / 5;
  background: beige;
  border: 1px solid #999;
}

form {
  grid-column: 1 / 3;
  background: beige;
  border: 1px solid #999;
}

.table-list {
  grid-column: 1 / 4;
  background: beige;
  border: 1px solid #999;
}

footer {
  background-color: tan;
  width: 100%;
  padding: 30px;
  min-height: 200px;
}