En-tête et pied de page fixes

Question

J'essaie de faire en sorte que l'en-tête et le pied de page soient toujours visibles en bas de l'écran/de la page.

Le code principal ci-dessous fonctionne correctement si l'en-tête n'est pas corrigé. Si activer cette petite partie dans css, le pied de page devient foireux. Si je ne le fais pas, l'en-tête ne sera pas réparé.

/* 
width: 100%; 
position: fixed; 
top: 0px; 
z-index: 1; 
*/ 

Y a-t-il un quelconque moyen de modifier l'aide?

Exemples avaient l'air: 1, 2, 3 et quelques autres.

Merci à l'avance

CSS:

* 
{ 
    margin: 0px; 
    padding: 0px; 
} 
html, body 
{ 
    height: 100%; 
    font-family: Verdana,Geneva,'DejaVu Sans',sans-serif; 
    font-size: 12px; 
    color: #333333; 
    background: #BABABA; 
} 
#container 
{ 
    min-height: 100%; 
    position: relative; 
} 
#header 
{ 
    display: block; 
    /* 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    z-index: 1; 
    */ 
    padding: 10px 10px 11px 10px; 
    color: #FFFFFF; 
    background: #000000; 
} 
#body 
{ 
    display: block; 
    margin-top: 40px; 
    padding: 10px; 
    padding-bottom: 40px; 
    /*background: #ff0000;*/ 
} 
#footer 
{ 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 20px; 
    border-top: 1px solid #EEEEEE; 
    padding: 9px 0px 3px 0px; 
    text-align: center; 
    font-size: 10px; 
    text-align: center; 
    color: #777777; 
    background: #000000; 
} 

HTML:

<div id="container"> 
    <div id="header"> 
     HEADER 
    </div> 
    <div id="body"> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
    </div> 
    <div id="footer"> 
     FOOTER 
    </div> 
</div> 

Answer 1

Donc, vous ne voulez pas que votre pied de page à fixer, mais il ne touche pas le fond de l'écran?

Si c'est votre problème, vous devriez faire ceci:

#header{ 
    height: 40px; 
} 

#container{ 
    padding-top: 40px; 
} 

Si vous voulez vous le pied de page à afficher en bas de la page, vous devez simplement définir sa position pour fixe

#footer{ 
    position: fixed; 
}