拉伸分隔线和iframe到屏幕高度

Question

在我的页面上，我有3个分隔符，用于页眉，内容和页脚。我想让我的内容分隔符内的iframe拉伸到屏幕高度，以及包含它的分隔符（减去页眉和页脚的高度）。我该怎么做？

Answer 1

您绝对可以定位header / content / footer div并将iframe相对定位在内容div中：

HTML -

<div id="header"></div>
<div id="content">
    <iframe></iframe>
</div>
<div id="footer"></div>

CSS -

#header {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100px;
    background : red;
}
#content {
    position   : absolute;
    top        : 100px;
    bottom     : 100px;
    left       : 0;
    width      : 100%;
    background : green;
}
#content > iframe {
    position   : relative;
    width      : 100%;
    height     : 100%;
    background : purple;
}
#footer {
    position   : absolute;
    bottom     : 0;
    left       : 0;
    width      : 100%;
    height     : 100px;
    background : blue;
}

这是一个jsfiddle：http://jsfiddle.net/jasper/dghW4/