javascript - 如何使一个div始终位于 View 的底部并使顶部div根据底部div调整大小？

Question

我是网络开发的新手，我正在做一些需要两个 div 始终占据 100% 视口(viewport)的东西。

我有一个 div A，它是一个交互式图像，应该尽可能大并且应该占据屏幕的顶部。

然后是 div B，它包含 1 个或 2 个按钮，具体取决于在交互式 div A 上执行的操作。Div B 位于 View 底部。

有没有一种干净的方法可以使 A 的大小取决于 div B 动态占用的大小？就像视口(viewport)的“剩余部分”应该是 div A 一样。我在下面放了一张我试图实现的图像。第二张图片显示了如果在 div A 中执行某些操作会发生什么 - 为简单起见，我们可以说如果调用了某些方法 potato()，我们希望 div B 现在包含两个按钮。

我试过用以下方法解决问题:

        position: fixed;
        bottom: 0;

Div B 看起来 90% 都是这样，但它不会调整 Div A 的大小，我也不希望 Div B 以这种方式“覆盖”任何东西。我只希望它与 Div A 处于同一级别并共享空间以获得 100% 的视口(viewport)。

任何帮助将不胜感激!如果可能的话，我更愿意使用纯 CSS。我正在做一些外出团队工作，无法以库或新依赖项的方式向元素添加太多内容。

Answer 1

检查这个 fiddle https://jsfiddle.net/kt931frp/1/诀窍是按照以下答案的建议使用 flex。

<div class="wrapper">
<div class="part1"></div>
<div class="part2">
<div contenteditable="true"class="contenteditable">continue typing...</div>
</div>
</div>

body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.part1 {
  background:#ffff00;
  flex: 1 0 auto;
}

.part2 {
  padding: 2em;
  color: white;
  background:#ff0000;
}
.contenteditable{
  width:100%;
  min-height:50px;
}