Question

我已将下面的容器定义为第三方javascript库（dhtmlx）中单元格的内容。我要做的是创建一个有两个div的容器，其中一个在底部有一个固定的高度，一个可以有不同的高度占用剩余的空间。

在这里搜索过，并试图做一些建议，但顶部空间似乎忽略了填充底部并显示底部固定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>

见小提琴：

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

使用剩余的空间将固定高度div放置在容器中的底部与另一个div

1 个答案: