javascript - 使用剩余空间将固定高度的 div 放置在容器底部，并使用另一个 div

Question

我已将以下容器定义为第 3 方 javascript 库 (dhtmlx) 中的单元格内容。我想做的是创建一个具有两个 div 的容器，其中一个在底部具有固定高度，另一个可以具有不同的高度，占据其余空间。

已在这里搜索，并尝试执行一些建议，但顶部空间似乎忽略了 padding-bottom 并显示底部固定 div 后面的内容。我如何设置样式以允许这种情况发生？

    var sContainer = "<div id='paging_containerDetails_{0}' style='position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: #B5CDE4 1px solid;'>".format(oTabProps.ID);
    sContainer += "<div id='gridDetails_{0}' style='position: relative; padding-bottom: 30px; width:100%; height:100%; background-color:white;overflow:auto;'></div>".format(oTabProps.ID);
    sContainer += "<div id='recDetailsinfoArea_{0}' style='position: absolute;bottom: 0; overflow: auto;width:100%;height:30px;'></div>".format(oTabProps.ID);
    sContainer += "</div>";

Answer 1

你可以使用这样的东西:

.top{height: calc(100% - 100px); width: 100%; background-color: red;}

calc()会让你设置 100% - the height底部<div>

参见 fiddle :

https://jsfiddle.net/ff0k9j45/5/