html - 具有混合高度模式(% & px)的嵌套 div 保留 '%' div 填充 'px' div 未使用的空间

Question

我希望“蓝色”容器始终为 70 像素高，而之前的“绿色”div 在使用 javascript 调整 div 大小时始终最大化可用高度。

我已经尝试了一段时间，但没有找到合适的解决方案。我们将不胜感激。

Answer 1

正如 promise 的那样，这是我的答案。

absolute inside relative 定位是最简单的方法。

Live Demo

HTML:

<div id="parent">
    <div id="left">height: 100%</div>
    <div id="right">Content</div>
    <div id="rightFooter">height: 70px</div>
</div>

CSS:

#parent {
    position: relative;
    height: 200px
}
#left, #right, #rightFooter {
    position: absolute
}
#left {
    width: 200px;
    top: 0;
    bottom: 0;
    left: 0
}
#right {
    top: 0;
    right: 0;
    bottom: 70px;
    left: 200px;
    overflow-y: auto
}
#rightFooter {
    height: 70px;
    right: 0;
    bottom: 0;
    left: 200px
}