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

Question

在我的頁面上，我有3個分隔符，用於標題，內容和頁腳。我想將我的內容分隔符內的iframe與包含它的分隔符一起伸展到屏幕高度（減去頁眉和頁腳的高度）。我該怎麼做呢？

Answer 1

您可以絕對定位您header/content/footer的div和相對定位的內容專區內的iframe：

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/