根據使用HTML5和CSS3的屏幕分辨率調整身體尺寸

Question

我正在嘗試執行以下操作。在中間創建一個靜態頂部（標題）和文章區域的網站，並使用導航控件粘滯頁腳。我的挑戰是以下幾點。我希望控件始終處於頁面底部，以防萬一重新調整瀏覽器的大小/以不同的分辨率打開頁面時，只能調整大小的文章區域......。我一直無法解決這個問題，或者看到正在這樣做的頁面。

我想要的100像素的靜態頭，爲150px靜態頁腳和window.innerHeight的文章區 - 尾 - 頭

我已經看到了很多與靜態頁面頁腳的，但所有的所有的人，你有瀏覽到屏幕底部，以便看到它。我希望我的任何時候都能顯示在屏幕的底部。

任何幫助將不勝感激。

Answer 1

#header{ 
background:yellow; 
position:absolute; 
top:0; 
left:0; 
height:100px; 
width:100%;  
} 

#foot{ 
background:yellow; 
position:absolute; 
bottom:0; 
left:0; 
height:150px; 
width:100%;   
} 

#content{ 
background:orange; 
position:absolute; 
top:100px; 
bottom:150px; 
width:100%;  
} 

在XHTML http://jsfiddle.net/DWMHr/

Answer 2

我覺得你最好的選擇可能是使製品面積overflow:scroll