2009-11-23 48 views
2

我有一個頁面,有2個領域:標題和內容。
標題應當[固定]固定在頂部,並且沒有固定的高度,並且其下面的內容。如何製作彈性垂直佈局?

問題是,如果內容區溢出,我需要滾動內容區域...例如:標題應始終存在,但內容可以向下滾動,即瀏覽器窗口,並且酒吧始終位於頂部和頁面滾動。

我使用JS在不同的頁面中執行此操作,其中「頁腳」具有固定高度,因此我可以說「嘿,內容,使用頁面高度減去頁腳高度」。

我可以只用HTML + CSS來實現嗎,還是我需要使用JS?如何?

+1

哦,男孩,我討厭固定頁眉和/或頁腳的頁面... – Svish 2009-11-23 14:49:59

+1

哈哈我也是,但這應該是這樣的。這是一個網絡郵件客戶端,這個頁面是'郵件內容'區域...'標題'是發件人,主題和垃圾。 =) – igorsantos07 2009-11-24 21:35:11

回答

2

這應該這樣做...

#header { 
    position:fixed; 
} 
+0

不適用於IE6 ...我需要這種支持。 – igorsantos07 2009-11-24 21:36:03

+6

在這種情況下,我爲你感到難過,因爲你需要使用Javascript來完成屬於博物館的瀏覽器的基本功能。 – 2009-11-24 22:25:07

0

具有一組頭高度將使它更容易些,但最終的JavaScript將幫助你完成你在找什麼。基本上你需要知道用戶屏幕的高度和標題的高度。從用戶屏幕的高度減去標題的高度,然後使用該值設置內容的高度。

請務必設置溢出:auto;獲取您的內容的滾動條。

您正在使用div進行佈局,而不是表格,對吧?如果不是,請考慮進行更改。使用div的網頁設計比表格設計更容易操作。

這個鏈接應該幫助你得到屏幕的高度所需的特定JS性能:Here

+0

我正在使用div。但我無法得到標題的高度因爲它不是由CSS設置的。至少我不知道如何只用JS來獲得它......任何想法? – igorsantos07 2009-11-24 21:37:20

1

你只需要CSS。下面的代碼會創建一個100px高的頁眉,一個50px高的頁腳和一個名爲「內容」的div,它將填充頁面的其餘部分。整個事情將佔用視口內的所有可用空間。如果您調整瀏覽器窗口的大小,頁面將相應地縮放。

如果「內容」div中有足夠的東西,您會在其中獲得一個滾動條。滾動條不會覆蓋頁眉或頁腳的任何部分,它將位於「content」div內。

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

div#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
} 

div#content { 
    position: fixed; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 50px; 
    overflow: auto; 
} 


div#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
} 

以不同的方式設置「左」和「右」,可以使其僅佔用一定量的可用空間。

div#header { 
    position: fixed; 
    top: 0; 
    left: 20%; 
    right: 20%; 
    height: 100px; 
} 

div#content { 
    position: fixed; 
    top: 100px; 
    left: 20%; 
    right: 20%; 
    bottom: 50px; 
    overflow: auto; 
} 


div#footer { 
    position: fixed; 
    bottom: 0; 
    left: 20%; 
    right: 20%; 
    height: 50px; 
} 

使用上面的CSS,整個事情將被集中,並留下40%的水平可用空間爲空。

+0

'position:fixed' does not for me cos'我需要IE6支持。我知道,令人毛骨悚然,但許多公司仍然把這件事給他們的低用戶工作者。這是一個網絡郵件。D = – igorsantos07 2009-11-24 21:38:43

+0

噢,我差點忘了。我需要頭部是免費的。它不能有高度設置... – igorsantos07 2009-11-24 21:39:32

+0

我的不好,我完全忘了IE6不支持position:fixed。我的代碼由於IE6而不適合你,因爲它需要知道標題有多高。抱歉。 – 2009-11-25 08:23:36