en-tête collant et pied de page

Question

J'essaie d'avoir un en-tête collant et pied de page sur mon modèle, qui fonctionne mais j'ai un problème en ce que l'id = "page" ne défile pas toujours sous l'en-tête!

Voici le site, http://zmgc.net/

Je vois qu'il ya un problème avec des éléments qui ont position = « relative » telles que les onglets et l'élément de boîte « Patricia a signé ... », à titre d'exemple. Comment est-ce que je fixe le id = "page" de sorte que tous les éléments dedans défilent toujours sous l'en-tête et le bas de page?

Answer 1

Set z-index pour l'en-tête comme ceci:

#hd{ 
z-index: 10000; 
} 

Answer 2

Utilisez position:fixed pour #header et #footer et overflow:hidden/auto pour le corps/page #.

Dans mon exemple, vous avez juste besoin hauteurs fixes pour en-tête et pied de page

jsFiddle

body{ 
    margin:0; 
    padding:30px 0 40px 0; 
    overflow:hidden; 
} 
#header{ 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:40px; 
    background: red; 
} 
#footer{ 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:60px; 
    background: blue; 
} 
#page{ 
    overflow:auto; 
    height:100%; 
    background: green; 
} ​