如何在不绝对定位的情况下让div占据剩余的父高度？

在没有绝对定位的情况下让 Div 占用剩余父高度

在 HTML/CSS 中，经常会遇到子 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;}

这里，“down”div 应该占据“”下面的空白向上” div.

解决方案

有以下几种方法实现这个：

网格：

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

Flexbox：

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

计算化:

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

溢出:

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

注意:

• 对于在支持 CSS Grid 和 Flexbox 的浏览器中，这些解决方案提供了更优雅的方法。
• 当父容器具有固定高度时，“溢出”方法会很有用。但是，它可能会导致意外的滚动行为。