Javascript 如何使一个div始终位于视图的底部，并根据底部div调整顶部div的大小？

我对web开发非常陌生，我正在做一些事情，需要两个div始终占据100%的视口

我有一个diva，它是一个互动图像，应该尽可能大，应该占据屏幕的顶部

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

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

我已尝试使用以下解决方案：

        position: fixed;
        bottom: 0;

分区B看起来90%正确，但它不会调整分区A的大小，我也不希望分区B以这种方式覆盖任何内容。我只希望它与diva的级别相同，并共享空间以获得100%的视口

---

任何帮助都将不胜感激！如果可能的话，我更喜欢使用纯CSS。我正在做一些团队以外的工作，不能在项目中添加太多库或新的依赖项。

实际上，使用Flexbox和属性非常容易。 您可以更改填充值以查看顶部块的反应

身体{ 保证金：0； } 主要{ 高度：100vh； 显示器：flex； 弯曲方向：立柱； } .顶部{ flex:10 auto；/*这告诉'top part'占据剩余的位置*/ 背景：紫罗兰色； } .底部{ 填料：2米； 颜色：白色； 背景：浅蓝色； } 这里有一些文字

---

实际上，使用Flexbox和该属性非常容易。 您可以更改填充值以查看顶部块的反应

身体{ 保证金：0； } 主要{ 高度：100vh； 显示器：flex； 弯曲方向：立柱； } .顶部{ flex:10 auto；/*这告诉'top part'占据剩余的位置*/ 背景：紫罗兰色； } .底部{ 填料：2米； 颜色：白色； 背景：浅蓝色； } 这里有一些文字 检查这把小提琴，技巧是使用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;
}

检查这把小提琴，技巧是使用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;
}

---

带着我的2美分，您还可以利用display:table | table row | table cell创建此布局查看on display属性了解更多信息

除非display:flex，否则使用这些属性的诀窍是告诉actions单元格的测量值为0.1px，这将强制单元格为最小值。但是，它不会压碎其内部内容，允许根据内部内容进行动态调整

由于默认情况下单元格是共享空间，这就完成了这种布局的工作，因为Div A正在使用剩余的可用空间

选中此项或使用下面的代码片段来处理它。我注释了可以调整的属性

身体{ 边际：0px； } .app{ 宽度：100vw； 高度：100vh； 显示：表格； } 主要的 .行动{ 显示：表格行； } .main>div， .actions>div{ 显示：表格单元格； 垂直对齐：中间对齐； 文本对齐：居中； 边框宽度：10px；/*调整此*/ 边框样式：实心；/*调整此*/ } .main>div{ 边框颜色：紫色；/*调整此颜色*/ 背景色：紫色；/*调整此颜色*/ } .actions>div{ 填充：20px；/*调整此*/ 边框颜色：蓝色；/*调整此颜色*/ 背景色：浅蓝色；/*调整此颜色*/ 高度：0.1px； } .按钮{ 宽度：200px；/*调整此*/ 填充：10px；/*调整此*/ } A组 分区B-一些文本和2个按钮 按钮1 按钮2

---

带着我的2美分，您还可以利用display:table | table row | table cell创建此布局查看on display属性了解更多信息

除非display:flex，否则使用这些属性的诀窍是告诉actions单元格的测量值为0.1px，这将强制单元格为最小值。但是，它不会压碎其内部内容，允许根据内部内容进行动态调整

由于默认情况下单元格是共享空间，这就完成了这种布局的工作，因为Div A正在使用剩余的可用空间

选中此项或使用下面的代码片段来处理它。我注释了可以调整的属性

身体{ 边际：0px； } .app{ 宽度：100vw； 高度：100vh； 显示：表格； } 主要的 .行动{ 显示：表格行； } .main>div， .actions>div{ 显示：表格单元格； 垂直对齐：中间对齐； 文本对齐：居中； 边框宽度：10px；/*调整此*/ 边框样式：实心；/*调整此*/ } .main>div{ 边框颜色：紫色；/*调整这个*/ 背景色：紫色；/*调整这个*/ } .actions>div{ 填充：20px；/*调整此*/ 边框颜色：蓝色；/*调整此颜色*/ 背景色：浅蓝色；/*调整此颜色*/ 高度：0.1px； } .按钮{ 宽度：200px；/*调整此*/ 填充：10px；/*调整此*/ } A组 分区B-一些文本和2个按钮 按钮1 按钮2