28172 sujets

CSS et mise en forme, CSS3

Footer reste en bas aprés resize de la fenêtre de navigation

Bonjour à tous,

Savez vous comment faire en CSS pour que le footer du site flash ci-dessous reste collé en bas de la page même lorsque la fenêtre du navigateur est redimensionné ?

http://www.gaeaforms.com/main.html

Merci à tous

Nicolas
Modifié par dreadstock (16 Mar 2009 - 14:02)
merci, mais je sais, c'est bien précisé dans la question, est il possible de faire un footer CSS qui réagi de la meme manière que sur ce site flash. merci
Quelque chose comme :

<div id="footer"></div>


#footer
{
   position : absolute;
   bottom   : 0;
   width    : 100%;
}
Agylus a écrit :
Quelque chose comme :

<div id="footer"></div>


#footer
{
   position : absolute;
   bottom   : 0;
   width    : 100%;
}


Non ce n'est pas suffisant ou alors si mais avec un positionnement fixed au lieu de absolute mais comme inconvénient que le footer passe au-dessus du contenu qui le précède lorsque l'on scroll.

Pour le positionnement absolute, il faut ajouter:

html, body {height: 100%;}
#wrapper { /*conteneur*/
	position:relative; 
	min-height:100%;
}


Puis un padding-bottom au moins équivalent à la hauteur du footer sur le dernier bloc présent avant le footer.
Modifié par Hermann (18 Mar 2009 - 14:01)
@Hermann : Je me suis basé sur son lien, sur lequel on peut observer le comportement :
- Aucune scrollbar n'apparaît, même quand la fenêtre redimensionnée est plus petite que la hauteur du contenu ;
- Le contenu passe sous le footer quand on redimensionne la fenêtre et que ce permier est plus grand que la hauteur de la fenêtre.

En ce sens, et donc avec ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titre</title>
<style>
body
{
   margin     : 0;
}
#footer
{
   position   : absolute;
   bottom     : 0;
   width      : 100%;
   background : red;
}
</style>
</head>
<body>

<div id="content">
   <p>Paragraphe</p>
   <p>Paragraphe</p>
   <p>Paragraphe</p>
   ...
</div>

<div id="footer">Footer</div>

</body>
</html>

L'effet désiré est le bon (mis à part la scrollbar qui apparaît), même au redimensionnement, le footer reste en bas de la fenêtre.

Après, il faudrait que l'auteur nous dise quel comportement exactement il souhaite avoir.
Bonjour,
Le dernier code marche bien et c'est également ce que je recherche mais il y a un bug :
lorsqu'on réduit la fenêtre jusqu'à voir la barre de scrool sur la droite et que l'on décide de redescendre dans la page, le footer reste collé où il était arrivé lors de la réduction de la fenêtre!
Y a t-il un moyen d'éviter cela ?
Merci
Hermann a écrit :
Non ce n'est pas suffisant ou alors si mais avec un positionnement fixed au lieu de absolute
Sujet clos
Aller à