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

Question

我有一个工作流程的模态对话框，显示大致固定高度的内容，但也显示嵌入的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>

和CSS我正在使用：

body, html {
    margin: 0;
    height: 100%;
}
.container {
    height: 100%;
    min-height: 100%;
    background: #F8F8FF;
}
.popUp {
    background: lightgrey;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 70%;
    height: 90%;
}
.popUpHeader {
    width: 100%;
    background: darkgrey;
    text-align: center;
}
.popUpFooter {
    width:100%;
    background:darkgrey;
    text-align:center;
    position: absolute;
    bottom: 0;
}
.fixedContent {
    height: 10em;
    text-align: center;
    background: #E1E1EE;
}
.resizeableContent {
    background: #7d7f7c;
    text-align: center;
    width: 100% height: 100%;
}

JsFiddle：http://jsfiddle.net/trainman1124/pnbeoyb9/2/

以下是所需结果的图像：

修改

以下是使用嵌入式PDF的示例JsFiddle，这是实际需要完成的。 http://jsfiddle.net/trainman1124/pnbeoyb9/3/

注意，我已修正了示例中缺少的分号，并添加了溢出：隐藏

Answer 1

您可以使用display: table;和display: table-row属性来填充空间。

将.container设置为填充页面的100％，将.popUp div设置为display: table;并填写其父级。

将所有子项显示为display: table-row;，然后为popUpHeader和popUpFooter div设置高度。

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

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

查看此CodePen

Answer 2

更新的小提琴的高度设置为％。这可以按你想要的方式工作吗？

更新
http://jsfiddle.net/batcave/pnbeoyb9/7/

.popUpFooter {
    width:100%;
    background:darkgrey;
    text-align:center;
    position: absolute;
    bottom: 0;
    height: 7%;
}

.resizeableContent {
    background: #7d7f7c;
    text-align: center;
    width: 100%;
    height: 80%;
}

.fixedContent {
    height: 10%;
    text-align: center;
    background: #E1E1EE;
}

Answer 3

修改Popup类使其颜色与resiseableContent相同

.popUp { background: #7d7f7c; /* Modified here */ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 70%; height: 90%; overflow: hidden; }

Answer 4

根据您需要支持的浏览器（这不会早于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;
}