使div（高度）占据父级剩余高度

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个div带两个孩子的容器。第一个孩子有给定的身高。如何让第二个孩子占据容器的“自由空间” div而不给其指定高度？

在示例中，粉红色div也应占据白色空间。

与此问题类似：如何使div占据剩余高度？

但是我不想摆 。

回答：

可以通过多种方式扩展#down子级以填充剩余的空间，#container具体取决于您希望获得的浏览器支持以及是否#up具有定义的高度。

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}
<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

CSS的grid布局提供了另一种选择，尽管它可能不如Flexbox模型那么简单。但是，只需要设置容器元素的样式即可：

.container { display: grid; grid-template-rows: 100px }

所述grid-template-rows定义的第一行作为固定100px的高度，并且保持行会自动拉伸以填充剩余的空间。

我非常确定IE11需要-ms-前缀，因此请确保在希望支持的浏览器中验证功能。

现在，CSS3的灵活框布局模块（flexbox）得到了很好的支持，并且可以非常容易地实现。由于它具有灵活性，因此即使在#up没有定义的高度时也可以使用。

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

重要的是要注意，IE10和IE11对某些flexbox属性的支持可能会出现问题，而IE9或更低版本完全不支持。

另一个简单的解决方案是使用CSS3calc功能单元，正如Alvaro在他的回答中指出的那样，但是它要求第一个孩子的身高是一个已知值：

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

它得到了广泛的支持，唯一值得注意的例外是<= IE8或Safari 5（不支持）和IE9（部分支持）。其他一些问题包括将 calc 与_transform_ 或 box-shadow 结合使用，因此如果您担心此问题，请确保在多个浏览器中进行测试。

如果需要较早的支持，则可以添加height:100%;，#down使粉红色div完全高出一个警告。因为#up将其向下推，将导致容器溢出。

因此，您可以添加overflow: hidden;到容器中以解决此问题。

或者，如果的高度#up是固定的，则可以将其绝对放置在容器中，并在上添加padding-top #down。

并且，另一个选择是使用表格显示：

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

以上是 使div（高度）占据父级剩余高度 的全部内容， 来源链接： utcz.com/qa/397290.html

回到顶部