html - 当 parent 长大/缩小时广泛的 div child

Question

我有这个 HTML 代码:

<div id="parent">
  <div id="child1">
  </div>
  <div id="child2">
  </div>
</div>

我想要做的是让 child2 占据 200px 并位于 parent 的底部，并让 child1 增长/收缩为parent 增长/缩小(例如用户放大/缩小页面)

例子:

如果 parent 的高度是 1000px，那么我希望 child1 的高度是 800px & child2 的高度为 200px。

如果 parent 的高度是 2000px，那么我希望 child1 的高度是 1800px & child2 的高度为 200px

我该怎么做？

Answer 1

您可以使用 flexbox完成这项工作。但请注意:仅在现代浏览器中受支持，请参阅 caniuse .

#parent {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  height: 1000px;
  background-color: gray;
}

#child1 {
  flex-grow: 1;
  min-width: 100%;
  background-color: orange;
}

#child2 {
  align-self: flex-end;
  min-width: 100%;
  height: 200px;
  background-color: red;
}

<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
</div>