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

我在下面将容器定义为第三方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>";

var scocontainer=”“.格式（oTabProps.ID）；
sContainer+=“”.format（oTabProps.ID）；
sContainer+=“”.format（oTabProps.ID）；
sContainer+=“”；

您可以使用以下内容：

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

calc（）

将允许您设置底部

的高度

100%

参见小提琴：

谢谢，如果我输入height:calc（100%-30px）而不是height:100%，这似乎对ie11有效，但是它似乎对ie8不起作用。我不确定，我所有的网站都会屏蔽ie8，所以我真的不知道。不过我可以告诉你，ie10及以下版本将在1月份不再受微软支持，所以这可能不是什么大问题；）我希望我能做到这一点：）然而，我有微软服务器上的用户，他们有严格的公司政策，不升级任何现成的东西。。。尝试使用框大小和填充底部，但没有使用。