Изменение размера тела в соответствии с разрешением экрана с использованием HTML5 и CSS3

Question

Я пытаюсь сделать следующее. Создайте веб-сайт со статическим верхним (заголовком) и областью статьи в середине и липким нижним колонтитулом с элементами управления навигацией. Моя задача заключается в следующем. Я хочу, чтобы элементы управления находились в нижней части страницы во все времена, поэтому в случае, если один размасштабирует браузер/открывает страницу с различным разрешением, изменяется только область статьи .... Я не смог решить эту проблему или увидеть страницу, которая это делает.

Я хочу, чтобы статический заголовок 100px, статический колонтитуле 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