我有一个包含灵活区域,弹出区域和页脚的div.
灵活的区域和页脚始终存在.
弹出区域为0,40px或60px,因为其内容是使用js动态更改的.
灵活区域应填充页脚上方的所有空间.
是否有一种仅限css的方法允许灵活区域根据弹出窗口的大小增加/减少其高度？
使用当前的css,当我删除jsfiddle中的弹出窗口时,灵活性不会扩展以填充该区域.
我试图看看我是否可以在没有jquery或flexbox的情况下做到这一点,以获得最大的兼容性.
感谢您的建议/意见!
https://jsfiddle.net/L8me7fLk/
div {
color: #ffffff;
}
#container {
height: 100vh;
width: 100vw;
}
#flexible {
background-color: red;
width: 100vw;
min-height: 68vh;
max-height: 80vh;
}
#popup {
width: 90%;
max-height: 60px;
min-height: 40px;
line-height: 20px;
overflow-y: scroll;
position: absolute;
bottom: 0;
margin-bottom: 50px;
background-color: #cccccc;
}
#footer {
width: 90%;
height: 50px;
background-color: #666666;
position: absolute;
bottom: 0;
}<div id="container">
<div id="flexible">
1content
<br/>2content
<br/>3content
<br/>
</div>
<div id="popup">
1popup
<br/>2popup
<br/>3popup …