Html 获取CSS DIV以填充其他DIV之间的所有高度

我有一个工作流的模式对话框，它显示大致固定高度的内容，但也显示一个嵌入式PDF供用户查看

我想根据用户的屏幕大小最大化PDF的高度，以便对话框垂直缩放，但我无法让PDF填充对话框div中的所有剩余空间

以下是Html：

<div class="container">
    <div class="popUp">
        <div class="popUpHeader">Header</div>
        <div class="fixedContent">Fixed Height Content</div>
        <div class="resizeableContent">I should fill all the free vertical space in .popUp</div>
        <div class="popUpFooter">Footer</div>
    </div>
</div>

JsFiddle：

以下是所需结果的图像：

编辑

下面是一个使用嵌入式PDF的JSFIDLE示例，这是实际需要做的事情。

---

注意，我已经更正了示例中缺少的分号，并且还添加了overflow:hidden

更新的小提琴的高度设置为%。我想这是你想要的吗

更新

---

修改弹出类，使其颜色与ResizeableContent相同

.popUp{
背景：#7d7f7c；/*此处修改*/
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
宽度：70%；
身高：90%；
溢出：隐藏；
}

根据您需要支持的浏览器（这在IE9之前不起作用），一种解决方案是使用

calc

和

vh

单位

比如：

.popUp {
    background: lightgrey;
    margin: auto;
    height: calc(100vh - 10em); /* Height of viewport minus your .fixedContent div, you may also want to include the height of the header */
    overflow: hidden;
}

---

您可以使用

display:table和
显示：表格行
属性以填充空间

将
.container
设置为填满100%的页面，并将
弹出窗口
div设置为
显示：表格并填充它的父项

将所有子项显示为
Display:表格行
，然后设置
PopupLoader
和
popUpFooter
div的高度

允许您的
resizebleContent
div填充剩余空间：

.resizeableContent {
    background: #7d7f7c;
    width: 100% height: 100%;
    display: table-row;
}

查看这个
非常接近，但是由于我们隐藏了溢出，我们失去了作为PDF查看器底部的控件。这是一个样本，JSFiddle@Nick更新了我的答案。你的问题是身高。它可以用javascript修复。它也可以用css修复。回答我上面的问题。更新后的提琴可能会起作用，但并不理想，因为固定内容的大小会随着窗口高度的变化而变化。可悲的是，“固定内容”并不是100%固定的，但它不会改变太多的大小。我只需要支持最新版本的Chrome。页脚可以是固定高度。@Nick更新了我的答案。我想这对你有用。只需使用
.fixedContent
根据您的需要进行一些小的调整，当然，这样做您将不得不降低
的高度。resizeableContent
resizeableContent实际上应该100%填充PDF，所以这不起作用。在我的问题中，我提供了一个更新的JSFIDLE。它确实使用overflow:hidden填充了整个区域，但是它隐藏了允许保存或打印PDF的浏览器控件。我喜欢这种方法，它确实给了我一些想法。在我的例子中，我将固定内容div设置为10em，但如果你读了我的问题，我说，“内容大致具有固定高度”，因此在实际站点中它并不是固定的，但变化不大。页脚可以设置为固定高度。@Nick好的，检查我的另一个答案，看看这是否对您更有利（解决了.fixedContent div的可变高度问题）这是一个很好的解决方案，我在
.popUp {
    background: lightgrey;
    margin: auto;
    height: calc(100vh - 10em); /* Height of viewport minus your .fixedContent div, you may also want to include the height of the header */
    overflow: hidden;
}

.resizeableContent {
    background: #7d7f7c;
    width: 100% height: 100%;
    display: table-row;
}