Intestazione e piè di pagina con posizione fissa mentre il contenuto è scorrevole?

Question

Sto provando a creare un sito Web in cui l'intestazione e il piè di pagina hanno una posizione fissa mentre il contenuto scorre al centro.

<header style="position:fixed"></header> 
<div id="content">some content</div> 
<footer style="position:fixed"></footer> 

Ho creato quello che pensavo avrebbe funzionato ma non è così. Ecco jsFiddle con il tutto. Come puoi vedere, parte del contenuto è nascosta sotto il piè di pagina e oltre (non riesco a vedere "HELLOWEEN" alla fine). Cosa devo cambiare per sistemarlo? Thanx

Answer 1

La soluzione più semplice per questo è di aggiungere padding equivalente all'altezza della vostra intestazione statica e piè di pagina:

#content { 
    width: 80%; 
    margin: 0 auto; 
    padding: 60px 0; 
} 

JSfiddle

Answer 2

1. rimuovere gli stili di posizione sulla intestazione e piè di pagina
2. imposta un altezza sul contenuto
3. aggiungi uno stile overflow-y: auto al contenuto

Se si desidera che l'altezza dei contenuti per abbinare la finestra del browser (meno l'intestazione e piè di pagina), utilizzare Javascript per impostarlo (e regolare sulla finestra ridimensionare gli eventi)

Answer 3

http://jsfiddle.net/yASFU/

<header>header</header> 
<section> 
    <div class="push">push</div> 
</section> 
<footer>footer</footer> 

html, body {height:100%; margin:0; overflow:hidden;} 
header, footer {display:block; background-color:black; height:10%;} 
section {height:80%; background-color:lightblue; display:block; overflow:auto;} 
section .push {height:4000px;}