如何让子div占据其父div的剩余高度？

如何使 Div 占据父级的剩余高度

考虑以下 HTML 和 CSS 代码：

<div>
<pre class="brush:php;toolbar:false">#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

这里，我们有一个带有两个子元素的容器 div。第一个子项 (#up) 具有给定高度，而第二个子项 (#down) 则没有。如何让#down占据容器div的剩余高度？

解决方案

有几种方法可以实现这一点，具体取决于浏览器兼容性以及#up是否有固定的高度。

选项：

1。网格布局：

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

2.弹性盒布局：

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

3.计算高度：

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

4。溢出隐藏：

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

方法的选择取决于具体要求和浏览器支持。请注意，CSS 现在包含用于调整大小的 max-content 属性值，这可能适合某些场景。