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

Question

我对Web开发还很陌生，我正在做一些需要两个div才能始终占据100％视口的事情。

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

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

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

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

        position: fixed;
        bottom: 0;

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

任何帮助将不胜感激！如果可能的话，我宁愿使用纯CSS。我正在做一些团队工作，无法在项目中增加库或新依赖项的方式。

Answer 1

检查这个小提琴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;
}

Answer 2

实际上，使用 Flexbox 和flex属性很容易。
您可以更改padding的值以查看顶部块的反应。

body {
  margin: 0;
}

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

.top-part {
  flex: 1 0 auto; /* This tells `top-part` to take the remaining place. */
  background: violet;
}

.bottom-part {
  padding: 2em;
  color: white;
  background: lightblue;
}

<main>
  <section class="top-part"></section>
  <section class="bottom-part">
    Some text here
  </section>
</main>

Answer 3

带来2美分的收益，您还可以利用In [169]: eval(converter(my_thing)) Out[169]: b'\xb4u' 来创建此布局（有关更多信息，请参见display MDN documentation）。

除非使用display: table|table-row|table-cell，否则使用这些属性的诀窍是让“动作”单元格的尺寸为0.1px，这将迫使该单元格尽可能地小。但是，它不会粉碎其内部内容，而是可以根据内部内容动态调整。

默认情况下，像元是共享空间，因为“ Div A”正在使用剩余的可用空间，所以可以完成这种布局。

选中此JSFiddle或使用下面的代码段进行播放。我注释了您可以调整的属性。

display: flex

body {
  margin: 0px;
}

.app {
  width: 100vw;
  height: 100vh;
  display: table;
}

.main,
.actions {
  display: table-row;
}

.main > div,
.actions > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-width: 10px; /* tweak this */
  border-style: solid; /* tweak this */
}

.main > div {
  border-color: purple; /* tweak this */
  background-color: violet; /* tweak this */
}

.actions > div {
  padding: 20px; /* tweak this */
  border-color: blue; /* tweak this */
  background-color: lightblue; /* tweak this */
  height: 0.1px;
}

.button {
  width: 200px; /* tweak this */
  padding: 10px; /* tweak this */
}

希望它可以帮助您获得灵感。