我是Web开发的新手,我正在做一些需要两个div才能始终占据100%视口的事情。
我有div A,它是一个交互式图像,应该尽可能大,并且应该占据屏幕的顶部。
然后,根据对交互式div A所执行的操作,包含1个按钮或2个按钮的divB。DivB位于视图的底部。
有没有一种干净的方法可以使A的大小取决于div B动态占用的大小?就像视口的“剩余”应该是divA。我在要实现的目标下方放置了一个图像。第二张图片显示了如果在div A中执行了某些操作会发生什么-为简单起见,我们可以说如果调用了某个方法Potato(),我们希望div B现在包含两个按钮。
我试着做一个解决方案:
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;
}