html - 具有列和增长行的动态高度的 CSS Grid 不能完全工作

Question

与 Remove empty space in CSS Grid 部分相关，但我正在努力实现一些改变。

我基本上希望我的行和列能够根据内容量增长和收缩。如果你看这个example on CodePen您可以看到蓝色 div 的内容溢出到粉红色的页脚中。它真的应该将页脚向下推。如果红色部分有很多内容，同样适用。

顶部绿色部分的高度也应该动态增加。如果没有内容，例如绿色部分没有内容，则应该将红色底部部分向上推以填充空白区域。

有人知道如何实现这一目标吗？

这是一个小片段:

<div class="grid">
  <div class="top">top<br/>top second line<br/></div>
  <div class="right">
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>
<div class="footer">Footer</div>

到目前为止的 css:

.grid {
    display: grid;
    grid-template-columns: 645px 316px;
  grid-template-rows: repeat(25, 10px);
  grid-column-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
    background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / -1;
    background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 6 / -1;
    background-color: red;
}

.footer {
  width: 100%;
  height: 50px;
  background-color: pink;
}

Answer 1

用4 行 定义网格并将页脚 放在网格内。

页眉/页脚可以根据其内容调整大小，而 bottom div 会扩展以占用剩余空间。

Codepen Demo

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-template-rows: min-content 1fr min-content min-content;
  grid-column-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 4;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  background-color: red;
}

.footer {
  height: 50px;
  background-color: pink;
  grid-column: 1 /-1;
  grid-row: 4;
}

<div class="grid">
  <div class="top">top<br/>top second line<br/></div>
  <div class="right">
    a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/>
  </div>
  <div class="bottom">
    bottom
  </div>
  <div class="footer">Footer</div>
</div>

对于网格外的页脚 - 使用3 行

.grid {
  display: grid;
  margin: auto;
  width: calc(645px + 316px + 20px);
  grid-template-columns: 645px 316px;
  grid-template-rows: min-content 1fr min-content;
  grid-column-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 3;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  background-color: red;
}

.footer {
  height: 50px;
  background-color: pink;
  margin: auto;
  width: calc(645px + 316px + 20px);
}

<div class="grid">
  <div class="top">top<br/>top second line<br/></div>
  <div class="right">

  </div>
  <div class="bottom">
    bottom a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/>
  </div>

</div>
<div class="footer">Footer</div>