填充窗口填充窗口的頁面

我目前正在構建一個網站http://grapevineiow.org/m_inspireblog.html。這個網站有一個頁眉和頁腳。我上面鏈接的頁面中有一個iframe的博客。很明顯，博客作爲一個連續的內容太長而無法適應頁面，因此需要滾動條。填充窗口填充窗口的頁面

但是，這是有問題的地方。我想讓滾動條保留在博客上（所以用戶可以滾動瀏覽它），但是我希望頁面能夠完全填滿窗口，所以頁眉和頁腳佔用了所需的最小空間。標題很好，但頁腳正在成爲問題。

我曾嘗試：

在CSS的body和html的高度設置爲100%。
在CSS中將content設置爲100%的高度，但這使得content填充窗口。
在CSS中將頁腳設置爲height:auto 0。

...但這些都沒有奏效。

我希望能夠解決這個問題，如果可能只使用CSS，但我願意使用HTML，如果需要的話。我想避免使用Javascript。

預先感謝您。

來源

2012-09-05 mongol

如果你知道頁眉和頁腳的高度，你可以在中間區域這樣設置頂部和底部實現這一點：

<style type="text/css"> 
html, body{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#header{ 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100px; 
    background: #f09; 
} 
#content{ 
    position: absolute; 
    width: 100%; 
    top: 100px; 
    bottom: 100px; 
    background: #f90; 
} 
#content iframe{ 
    width: 100%; 
    height: 100%; 
} 
#footer{ 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
    background: #90f; 
} 
</style> 

<div id="header"></div> 
<div id="content"> 
    <iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe> 
</div> 
<div id="footer"></div>

來源

2012-09-05 15:54:49 robC

填充窗口填充窗口的頁面

回答

相關問題