Geckozone

Bonjour à tous,

J'ai le code simplifié suivant:

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

Je souhaiterais donner une hauteur fixe à "haut" et à "bas" tout en faisant en sorte que la hauteur de "milieu" change de façon à ce que les hauteurs de "haut" + "milieu" + "bas" fasse 100% de l'écran...

Vous avez compris il s'agit d'une page avec une bannière en haut et un pied de page en bas. Je souhaite avoir la bannière et le pied de page continuellement à l'écran sans que l'internaute ait à scroller vers le bas...

Est-ce possible ? Si oui, comment ?

De tête, mais ça devrait être ça :

Code : Tout sélectionner

#haut { margin-top: 0px ; margin-bottom: auto ; height: 100px ; }
#milieu { margin-top: 100px ; margin-bottom: 150px ; height: auto ; }
#bas { margin-top: auto ; margin-bottom: 0px ; height: 150px ; }

Les hauteurs indiquées le sont évidemment à titre indicatif.
Si tu souhaites que haut et bas restent fixes à l'écran avec le contenu du milieu qui défile, alors il faut jouer avec des position: fixed et un overflow: auto.

Merci de ta réponse mais en fait dans ta solution le total (haut, milieu et bas) ne fait pas 100% de l'écran...

Euh, tu m'expliques pourquoi ?
À partir du moment où margin-top du haut = 0 et margin-bottom du bas = 0, avec height variable pour le milieu, ça devrait automatiquement faire 100%.

Pour ma part je mettrais #haut et #bas en position:fixed, avec une margin-top et une margin-bottom de 100px sur #milieu qui aura un height:100%.

En fait ça devrait même marcher en position:absolute du coup

Et tout en fixed ?

Code : Tout sélectionner

#haut {
   position: fixed ;
   height: 100px ;
   width: 100% ;
   top: 0px ;
   right: 0px ;
   bottom: auto ;
   left: 0px ;
   margin: 0px ;
}
#milieu {
   position: fixed ;
   height: auto ;
   width: 100% ;
   top: 100px ;
   right: 0px ;
   bottom: 100px ;
   left: 0px ;
   margin: 0px ;
   overflow: auto ; /* pour que le contenu défile dans cette fenêtre */
}
#bas {
   position: fixed ;
   height: 100px ;
   width: 100% ;
   top: auto ;
   right: 0px ;
   bottom: 0px ;
   left: 0px ;
   margin: 0px ;
}

Cette dernière solution marche très bien chez moi. Merci beaucoup à vous...

Vous pensez que IE l'affichera correctement ?

Mais je crois qu'IE ne reconnaît pas le fixed, si ?

Logiquement en remplaçant tous les fixed par absolute ça devrait pouvoir jouer... à moins qu'IE ne décide de faire des siennes avec les hauteurs, mais je ne pense pas vu que "top" et "bottom" sont fixés ici.

Rappel : IE ne supporte pas la position:fixed et interprète les hauteurs/largeurs un peu comme il veut (parfois comme des min-height/width ou des max-height/width)

calimo a écrit :Rappel : IE ne supporte pas la position:fixed et interprète les hauteurs/largeurs un peu comme il veut (parfois comme des min-height/width ou des max-height/width)

Ahlala, donc ma solution, c'était trop simple pour être vrai

PS: on devrait pouvoir chiffrer le surcoût financier supporté par la collectivité (employeurs, informaticiens, ...) que représente la somme des bidouilles et de temps perdu pour qu'une solution fonctionne à la fois à gauche et à droite

...

Oui, tu as raison... Avec MFF, pas de temps perdu donc économie d'argent... En plus, il est libre.

Oui, tu as raison... Avec MFF, pas de temps perdu donc économie d'argent... En plus, il est libre.

Geckozone

Hauteur: 100%...

Hauteur: 100%...