28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement de footer dans une div à hauteur variable

Bonjour,

Après pas mal d'heures de recherche, je voudrais savoir si on peut placer en CSS (pas en Javascript) une div footer au bas d'une div à hauteur variable.

J'ai une div "conteneur_global" avec les caractéristiques suivantes :
#container_global { margin:0 auto; padding:0; position:relative; height:auto !important; height:100%; min-height:100%; }
qui occupe donc toute la hauteur du navigateur.

A l'intérieur une div footer
#footer {height:25px; width:100%; margin:0; padding:0; }

1/ Lorsque #container_global contient plus de données que peut en afficher le navigateur, #footer est repoussée en bas hors cadre (ce qui est correct) ; mon problème n'est donc pas de faire un positionnement fixe type "position:absolute; bottom:0;"

2/ Par contre si #container_global contient peu de données, #footer remonte sous le contenu ; ? peut-on faire en sorte dans ce cas de figure que la div reste collée en bas ?

En espérant avoir été clair...
Par avance merci
Modifié par JLV25 (11 Oct 2011 - 13:15)
6l20 a écrit :
Sujet traité à maintes reprises, merci d'utiliser la fonction recherche du forum Smiley cligne


je l'ai fait mais je ne trouvé aucun post relatif à mon problème, ou alors je n'ai pas utilisé les bons mots-clés... il ne s'agit pas de coller un footer toujours visible en bas de page ou dans une div flottante
fvsch a écrit :
Hello,

C'est pas tout jeune et la solution pour le problème posé par la fusion des marges n'est pas très élégantes, mais bon:
Page sur toute la hauteur de la fenêtre, avec pied de page en bas



pas très élégant mais en tout cas ça marche !

Ci-dessous le code qui va bien chez moi :
#container_global { margin:0 auto; padding:0; position:relative; min-height:100%; }
#footer {height:40px; width:100%; margin:0; padding:0; bottom:0; position:absolute; }
div#container_global #container { padding-bottom: 60px; }


la dernière ligne servant à éviter un chevauchement avec le contenu de "container"

Pour info je n'ai pas fait de test sous IE 6 mais je ne m'occupe plus de cette Smiley fache

merci beaucoup en tout cas
Modifié par JLV25 (11 Oct 2011 - 13:13)
Sujet clos
Aller à