Je sais que cela a été demandé beaucoup de fois dans le passé, mais pour la vie de moi, je ne peux pas sembler obtenir d'autres solutions à travailler.
Ce que j'essaie de faire est d'obtenir le pied de page (qui est une image qui se répète sur la largeur de la page) à coller au bas du navigateur lorsqu'il n'y a pas assez de contenu pour le pousser naturellement à la En bas de la page et quand il y a suffisamment de contenu pour le pousser au fond, il fait exactement cela. Un exemple est celui de http://www.themaninblue.com/experiment/footkalt/good_example_short .htm qui fait exactement ce que je veux, mais je ne peux pas aller travailler non plus. P>
Le code que j'ai actuellement mis en œuvre rend le pied de page de pied de page à une certaine section de la page avec du texte en passant sous. Vous pouvez le voir à Sourcectrl.co.uk mais ce n'est pas grand chose à regarder. Heres le code de votre plaisir de visualisation. P>
html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 66px;
background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}
section {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: 87px;
position: relative;
padding-bottom: 90px;
}
footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 87px;
background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}
3 Réponses :
C'est la source qui m'a aidé à réaliser une telle mise en page:
http: // www .jaydepro.com / Blog / Publier / Framedel-Page-Header-and-Footer-UTIL-CSS.ASPX
Comment avez-vous modifié le code pour l'obtenir pour rester apposé au bas de la page? Lorsque j'insère ce code enlevez mes images et placez-la dans la couleur de la page de pied de page et de sa bordure, le pied de page et l'en-tête collectez-vous simplement en haut et en bas de la fenêtre du navigateur. Ce que j'aimerais faire, c'est quand il y a beaucoup de contenu sur la page, le pied de page est poussé à de la vue jusqu'à ce qu'il n'y ait plus de contenu.
Ah, je vois ce que tu veux et comment cela diffère à l'exemple ci-dessus. Je voulais une en-tête et un pied de page fixes à l'écran, vous n'avez donc pas besoin d'adapter le code comme vous le souhaitez.
Je crois que le code que vous recherchez est ici:
http://www.themaninblue.com/witing/persperspective/2005 / 08/29 /
Je l'ai mis en œuvre juste maintenant sur mon site, et ça marche bien!
C'est un moment depuis que vous avez posé votre question, mais j'espère que cela aide!
Tout mettre dans la principale dans une enveloppe et utilisez le code suivant:
html, body, form
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different)
}
#footer, .push
{
height: 60px; (This is just the height of MY footer, change this to whatever size your footer is)
}