具有动态高度的CSS网格用于列和不断增长的行不完全正常工作 [英] CSS Grid with dynamic heights for columns and growing rows not fully working

问题描述

部分与删除CSS网格中的空白空间相关，但与我试图实现的变化很少。

我基本上希望我的行和列能够根据内容的数量增长和减少。如果您查看 CodePen示例，您可以看到蓝色div的内容溢出到粉红色的页脚。它应该真的推下脚。如果红色部分的内容很多，同样适用。

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

任何人都有想法如何实现这一目标？

以下是一个小片段：

 < div class =grid> 
< div class =top> top< br />上方第二行< 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> 
底部
< / div> 
< / div> 
< div class =footer>页脚< / div> 
  

至此为止：

  .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; 
背景颜色：红色; 
} 
 
 .footer {
 width：100％; 
 height：50px; 
 background-color：pink; 
 
  

解决方案

使用 4行，并将页脚放入网格中。

页眉/页脚的大小可以根据到它们的内容，而底部 div可以解释为占用剩余空间。

Codepen Demo

  .grid {display：grid; grid-template-columns：645px 316px;网格模板行：最小内容1fr最小内容最小内容; grid-column-gap：20px;} top {grid-column：1/2; background-color：green;}。right {grid-column：2;网格行：1 / span 4; background-color：blue;}。bottom {grid-column：1; background-color：red;}。footer {height：50px; background-color：pink;网格列：1 / -1; grid-row：4;}  

< div class = 网格 > < div class =top> top< br />上方第二行< br />< / div> < div class =right>一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br /> < / DIV> < div class =bottom>底部< / div> < div class =footer>页脚< / div>< / div>

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



  .grid {display：grid;保证金：汽车; 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;网格行：1 / span 3; background-color：blue;}。bottom {grid-column：1; background-color：red;}。footer {height：50px; background-color：pink;保证金：汽车; width：calc（645px + 316px + 20px）;}   
  < div class =grid> < div class =top> top< br />上方第二行< br />< / div> < div class =right> < / DIV> < div class =bottom>底部一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br /> < / div>< / div>< div class =footer>页脚< / div>  

Related partially to Remove empty space in CSS Grid, but with a few changes I am trying to achieve.

I basically want my rows and columns to be able to grow and shrink according to the amount of content there is. If you look at this example on CodePen you can see that the content of the blue div overflows into the pink footer. It should really push the footer down. Same applies if the red section had a lot content.

Also the top green section should too increase in height dynamically. And if there is no content, for example none in the green section, then it should have the red bottom section push up to fill in the empty space.

Anyone have an idea how to achieve this?

Here is a little snippet:

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

And the css so far:

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

解决方案

Define the grid with 4 rows and put the footer inside the grid.

The header/footer can size according to their content while the bottom div explands to take up the remaining space.

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>

For the footer outside the grid - use 3 rows

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

这篇关于具有动态高度的CSS网格用于列和不断增长的行不完全正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！