Bas de page fixe

Bonjour, j'ai un comportement bizarre.
J'ai 3 boîte :
- une image avec un positionnement flottant à gauche;
- une colonne de texte qui vient donc à droite;
- un bas de page sur toute la largeur de la fenêtre et qui doit rester en bas.

Lorsque le texte de la colonne de texte n'est pas plus haut que la hauteur de la fenêtre mon bas de page reste vraiment scotché en bas.
Mais lorsque le texte est plus haut (donc dépasse en hautuer la hauteur de la fenêtre) mon bas de page n'est plus scotché en bas.

#image {
	width: 200px;
	margin: 25px;
	float: left;
}
#texte {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	padding-left: 250px;
	padding-top: 25px;
}
#bas {
	background-color: #336666;
	height: 20px;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	clear: both;
}

<div id="image">
<img src="fond.jpg" alt="Test flottant" width="200" height="150" />
</div>

<div id="texte"> 
  <p>    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilita de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.  </p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.<br />
  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilita de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilita de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.<br />
  </p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.<br />    
    <br />
  </p>
  </div>

<div id="bas"></div>

Modifié par Igor (21 Jan 2009 - 18:28)

Bonjour.
Je ne comprend pas très bien ton problème...

a écrit :
Lorsque le texte de la colonne de texte n'est pas plus haut que la hauteur de la fenêtre

De quelle fenêtre parles-tu ?

Bonjour, disons que peut-être je fais erreur, je m'explique.
Lorsque j'appelle ma page dans mon navigateur avec ma fenêtre navigateur affichée plein écran, mon pied de page est réellement scotché en bas.
Si je réduis ma fenêtre du navigateur, les croll apparaît mais le pied de page est toujours scotché en bas.
Par contre, si je touche au scroll pour par exemple le faire descendre, là le pied de page suit le scroll et n'est donc plus scotché en bas.
Moi j'aimerai mais je ne sais pas si c'est possible que le pied de page soit toujours en bas même si je manipule le scroll.

Merci.

Bonjour,

Le pied de page est placé en bas du viewport, puis reste à cette place. Suivant qu'on veut le garder toujours présent à l'écran ou non, il faudra:

1. utiliser le positionnement fixe et non pas le positionnement absolu;
2. utiliser le positionnement absolu, mais par rapport à un référent défini explicitement, ce référent devant être un conteneur positionné (à priori en relatif) et en min-height: 100%.

Le deuxième cas demande de savoir gérer correctement le positionnement absolu (c'est à dire savoir positionner des éléments par rapport à un conteneur lui-même positionné et pas par rapport à «la page» ou «la fenêtre»), et de savoir créer un conteneur prenant au minimum toute la hauteur du viewport ou la hauteur du contenu (en s'adaptant à la plus grande des deux).

La FAQ donne déjà quelques pistes.