Hauteur: 100%...

[guilhem_mdg]

Bonjour à tous,

J'ai le code simplifié suivant:

Code : Tout sélectionner

<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 ?

[FF_Olivier]

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.

[guilhem_mdg]

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

[FF_Olivier]

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%.

[calimo]

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

[FF_Olivier]

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 ;
}

[guilhem_mdg]

Cette dernière solution marche très bien chez moi. Merci beaucoup à vous...
Vous pensez que IE l'affichera correctement ?

[nomade]

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

[calimo]

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)

[FF_Olivier]

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 ...

[guilhem_mdg]

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

[guilhem_mdg]

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