如何製作彈性垂直佈局？

Question

我有一個頁面，有2個領域：標題和內容。
標題應當[固定]固定在頂部，並且沒有固定的高度，並且其下面的內容。

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

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

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

Answer 1

這應該這樣做...

#header { 
    position:fixed; 
} 

Answer 2

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

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

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

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

Answer 3

你只需要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％的水平可用空間爲空。