Dissocier la hauteur d'un bloc de son contenu

Tout d'abord, bonjour !

Voilà, je viens vers vous car je tourne en rond ....

Je fais un truc pourtant tout tout bête ....

J'ai un bloc #page qui est mon conteneur principal centré dans mon écran.
Il a une couleur de fond.
Je souhaite que ce bloc fasse toute la hauteur de l'écran si le contenu est court. J'y arrive avec height : 100% si je l'applique au bloc #page et à son parent html,body.

Mais lorsque mon texte est plus grand que l'écran, il sort du bloc .....

J'ai donc essayé min-height. Magnifique, ca marche !!!!

Sauf pour la page où le texte est plus court ... retour à la case départ !

J'ai essayé de combiné les deux .... mais dans ce cas, quand mon contenu est plus long que l'écran il redépasse .....

J'ai beau cherché sur internet, je trouve des hack pour IE .;; mais j'en suis pas là, je voudrais déjà que ça marche sous FF...

Merci pour votre aide !!!!!

Salut Kalana ,

tu pourrais faire :

html, body {
    height: 100%;
}

#page{
	position:relative;
	min-height:100%;
	width:600px;
	background-color:#FF3300;
}

et un commentaire conditionnel pour IE6.

A+
Modifié par Heyoan (06 Nov 2007 - 13:19)

Bonjour,

Tout d'abord, merci ! Ca marche et même sans mettre

a écrit :
position:relative;

Je pensais avoir testé cette configuration .... je devais avoir un autre élément pertubateur ....

Merci encore.

Question subsidiaire : je sais qu'il existe des sites permettant de visualiser la page telle qu'elle sera vue sur d'autres navigateurs ... En auriez-vous l'adresse ?
Encore une fois merci !

Kalana a écrit :
Question subsidiaire : je sais qu'il existe des sites permettant de visualiser la page telle qu'elle sera vue sur d'autres navigateurs ... En auriez-vous l'adresse ?
Encore une fois merci !

Tu devrais trouver cela dans la partie Ressources.