Pied de page avec les en-têtes dépassés de la couverture de la page

Question

Tous les pieds de page collants exigent que vous placiez tout le contenu dans un enveloppement page à l'exception du bas de page. J'ai une situation où l'en-tête doit se trouver en dehors de la page Emballage:

<div id="header">...</div> 
<div id="page-wrap">...</div> 
<div id="footer">...</div> 

Quelqu'un sait ce que l'additif au CSS serait dans ce cas?

Answer 1

Le travail suivant ne ressemblerait pas?

<div id="page-wrap"> 
    <div id="header">Header stuff</div> 
    <div id="contents">Actual page innards</div> 
</div> 
<div id="footer">Footer text</div> 

Vous n'avez pas donné de détails, mais je devine que vous voulez une sorte de formatage de ne pas appliquer à #header. La solution consiste à mettre cette mise en forme sur #contents, pas sur # page-wrap. En fait, ne mettez aucun formatage sur # page-wrap autre que ce qui est nécessaire pour pousser le pied de page vers le bas.

Answer 2

J'ai utilisé une deuxième classe wrapper pour créer un en-tête et un pied de page collants. Alors que l'en-tête collant fonctionnera bien à l'intérieur de l'emballage, il y a beaucoup de solutions proposées au pied de page qui ne collent pas.

J'ai trouvé que certaines de ces solutions de contournement étaient à l'origine des problèmes d'en-tête. Après avoir essayé la plupart des solutions de contournement suggérées, j'ai trouvé que coller les deux dans leur propre classe avec exactement les mêmes propriétés que l'encapsuleur d'origine rend le tout collant au reste de la page tout en nécessitant un minimum de code.

Answer 3

Essayez cette link

tête collante et pied de page peut être facilement fait en utilisant la position de la propriété CSS: fixe.