Как исправить navbar & footer в HTML CSS

Question

Как сделать навигационную панель и нижний колонтитул фиксированным.

Изображение показано:

Answer 1

Использование 3 дивы с абсолютными позициями.

HTML

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

CSS

#header, #content, #footer { position absolute; left: 0; right: 0 } 
#header { top: 0; height: 200px; } 
#content { top: 200px; bottom: 200px; overflow-y: auto; } 
#footer { bottom: 0; height: 200px;} 

Но избежать этого, если это возможно. У вас будут проблемы с небольшими экранами и переполнением содержимого на верхнем и нижнем колонтитуле.

Answer 2

Здесь мы идем

HTML:

<div id="navbar"></div> 
<div id="body-content"></div> 
<div id="footer"></div> 

CSS:

 
#navbar, 
#footer { 
    width:100%; 
    height:20px; 
    background:#ccc; 
    position:fixed 
} 

#navbar {top:0} 
#footer {bottom:0} 

html, body {height:100%} 

Live Example