28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Je cherche à positionner un pied de page en bas de la page (logique) quelle que soit la hauteur de celle-ci.
J'ai donc le css suivant :
html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	position:relative;
}
div#footer {
	position:absolute;
	bottom:0;
}

Le problème, c'est que la propriété height:100% sur html rend le corps PLUS GRAND que la hauteur disponible, ce qui provoque l'apparition d'une barre de défilement et qui surtout masque une partie de mon footer.

Quelqu'un aurait-il la solution à ce problème ??

Merci d'avance !
Modifié par MatTheCat (15 Feb 2010 - 11:41)
Merci pour ta réponse (encore toi !).

J'avais déjà lu un article similaire sur pompage.net, la technique est la même et ne résout pas mon problème.

J'illustre :

upload/26803-capture.jpg

Le code est exactement le même et pourtant..! (Il est écrit "test" sur mon footer Smiley sweatdrop )

EDIT : bon apparemment d'après l'inspecteur d'éléments le problème viendrait d'un hypothétique padding appliqué à html.
Le fait de mettre son corps en position relative a-t'il un rapport ??
Modifié par MatTheCat (15 Feb 2010 - 11:26)
MatTheCat a écrit :
la technique [...] ne résout pas mon problème.
Euh... ben si en allant sur cette page tu vois bien le footer en bas c'est que la technique est bonne mais que tu as fait une erreur en l'appliquant non ? Smiley langue
Je me suis fait grilled mon edit Smiley biggrin
Effectivement le problème ne vient pas de la hauteur de l'élément html, mais de la position du corps :

upload/26803-inspecteur.jpg

Sachant que j'ai
html, body {
	margin:0;
	padding:0;
}

je comprends pas vraiment.

Peut-être un problème avec le positionnement relatif ??

EDIT : incroyable j'ai trouvé..!
C'est le margin-top du premier div enfant du corps qui provoquait la descente de ce dernier.
Du coup je l'ai appliquée au premier enfant de ce div et là ça marche.

J'ai pas encore saisi toutes les subtilités du positionnement Smiley confus
Modifié par MatTheCat (15 Feb 2010 - 11:38)