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行定义网格，并将footer放入网格中。

页眉/页脚可以根据其内容进行调整，而bottom div会解释占用剩余空间。

Codepen Demo

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

具有动态高度的CSS网格，用于列和增长的行不能完全正常工作

1 个答案: