CSS - Faire un div consomme tout l'espace disponible
Tous,
J'ai une page qui est supposer avoir seulement l'espace disponible à l'écran dans le navigateur.
J'ai une 'barre du haut" et " bas " bar, qui sont fixés positionné en haut et en bas de la page. Je veux avoir une div qui va consommer (prendre) le reste de l'espace entre les deux barres mentionnés ci-dessus.
Son essentiel que le milieu de la div n'est pas recouverte par les barres supérieure et inférieure. Est-ce possible avec CSS ou dois-je besoin de faire usage de js.
Aussi, si je dois aller avec js, considérant que le navigateur charge le CSS d'abord avant que le code js, comment est le travail ci-dessus utilisant js pour le centre de positionnement?
Merci beaucoup,
source d'informationauteur Kayote
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser
relative
etabsolute
positions. Voici un exemple:css
html
Démo: http://jsfiddle.net/jz4rb/4
Cette démo fonctionne pour moi en Chrome12 mais YMMV selon les navigateurs qui ont besoin de soutien. Par exemple
position:fixed
ne fonctionne pas correctement dans IE6.Utiliser le positionnement absolu sur la
body
tag.position:absolute
avec le zéro en haut et en bas de l'écran sera "l'étirement" du corps à l'être de la même taille que la fenêtre du navigateur. Sinon, la configurationheight: 100%
fonctionne aussi mais je me souviens qu'il fonctionne bizarre pour certains vieux navigateurs.Ensuite utiliser le positionnement absolu sur le centre div, avec assez haut/bas afin d'éviter des décalages de votre en-tête et pied de page des bars. La barre d'en-tête est en position absolue avec
top
et la fotter est en position absolue avecbottom
.Remarque: Cela ne fonctionne pas sur les navigateurs mobiles. Vous aurez besoin d'utiliser JS pour obtenir la fenêtre de la hauteur et de définir manuellement le centre div hauteur.