我是Web开发的新手,我正在做一些需要两个div才能始终占据100%视口的事情。

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

然后,根据对交互式div A所执行的操作,包含1个按钮或2个按钮的divB。DivB位于视图的底部。

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

javascript - 如何使一个div始终位于 View 的底部,并根据底部div调整顶部div的大小?-LMLPHP
我试着做一个解决方案:

        position: fixed;
        bottom: 0;


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

任何帮助将不胜感激!如果可能的话,我宁愿使用纯CSS。我正在做一些团队工作,并且不能在项目中添加太多库或新依赖项。

最佳答案

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

09-16 21:49
查看更多