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

Question

有人提出了类似但不完全是这样的问题。在设置为最小高度的容器中，网格中的行是 1) 隐式的，2) 垂直扩展至容器的高度。我希望每个元素都有它的自然高度。

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

不确定这里发生了什么。想法？

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

.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;
}

<main id="primary" class="chapter" itemprop="page">

  <div class="column">
    <h1>Test Page</h1>
    <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>

    <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>
    </p>
  </div>

  <form>
    <p>Name: <br><input type="text"></p>
    <p>Gender: <br><input type="text"></p>
    <p>Age: <br><input type="text"></p>
    <p>Email: <br><input type="text"></p>
  </form>

  <div class="table-list">
    <table>
      <tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
      </tr>
    </table>
  </div>

</main>

<footer id="colophon" class="site-footer">
</footer>

Answer 1

default setting for implicit rows 是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 */
}

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

<main id="primary" class="chapter" itemprop="page">

  <div class="column">
    <h1>Test Page</h1>
    <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>

    <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>
    </p>
  </div>

  <form>
    <p>Name: <br><input type="text"></p>
    <p>Gender: <br><input type="text"></p>
    <p>Age: <br><input type="text"></p>
    <p>Email: <br><input type="text"></p>
  </form>

  <div class="table-list">
    <table>
      <tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
      </tr>
    </table>
  </div>

</main>

<footer id="colophon" class="site-footer">
</footer>

Answer 2

我试过display: flex 和同样的问题——元素垂直拉伸以填满容器。

所以，我用另一个 div 包装了 3 个元素，从原始包装器中删除了 display: grid 并将其应用于新包装器。作弊？可能是。但是，这可能是正确的方法。

原文：

<main id="primary" class="chapter">
    <div class="column">...</div>
    <form>...</form>
    <div class="table-list">...</div>
</main>

main.chapter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 0.5rem;
    max-width: 600px;
    margin: 20px auto;
    min-height: 80vh;
}

修订：

<main id="primary" class="chapter">
    <div class="wrapper"> <!--added -->
        <div class="column">...</div>
        <form>...</form>
        <div class="table-list">...</div>
    </div>
</main>

main.chapter {
    max-width: 600px;
    margin: 20px auto;
    min-height: 80vh;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 1.0rem;
}