28173 sujets

CSS et mise en forme, CSS3

Toujours heigth = 100 %

bonjour à tous,

avant de reposer ma question j'ai explorer toute les ressources .. enfin je crois
notamment l'article de raphael

http://blog.alsacreations.com/2004/05/13/3-height

qui permet d'obtenir
http://desjeuxcreations.fr/test2.html

mais dès que le contenu contient du texte long ... alors la couleur jaune s'arrete ………si vous reduisez la taille de la fenêtre du navigateur pour faire apparaitre le scroll, ma bande jaune s'arrete alors que le texte continu .....
http://desjeuxcreations.fr/test.html

et moi je deviens fou avec tout ça

quand je serais grand je ferais des mises en pages en tableaux .. na !

si vous avez une explication à ce phénomène je suis preneur

merci,
jacques

Smiley decu
Si tu donnes à ton conteneur un height 100%, alors c'ets une taille stricte et non étirable.
Quand ton contenu dépasse de la page, il dépasse de son conteneur...

Il faut utiliser la propriété min-height. Comme elle n'est comprise par ie <= 6, tu fais un correctif pour ie avec height=100%, car ie <= 6 comprend ca comme un min-height !
Bonjour,

en rajoutant ça en haut de ton code, ça doit le faire (ça le fait ici en tout cas Smiley smile 


html	{
height: 100%;
}


Cordialement,

JF
ah j'ai oublié... fo virer le 100% de ton contenu... ici voici le code css modifié : 


<style type="text/css">
<!--html, body { margin: 0; padding: 0; height: 100%
; overflow: auto; }

html	{
height: 100%;
}

#contenu{
width:20em;
position:absolute;
left:0;
top:0;
background-color: yellow;
}
--></style>


Voili Smiley biggrin
Administrateur
Hello,

L'explication a été donnée par yahrou : "height" indique une hauteur qui sera figée.
Pour obtenir une hauteur minimale, il faut utiliser min-height, en tenant compte des bugs IE avec "height/min-height".
Administrateur
fxbrg a écrit :
ah j'ai oublié... fo virer le 100% de ton contenu... ici voici le code css modifié

Hmm c'est exactement ce qu'a fait jacques depuis le début Smiley ohwell
merci pour toutes ces explications, une dernière précisions qui semble m'échaper

la hauteur pour "html" définie dans cette ligne

html, body { margin: 0; padding: 0; height: 100%…


n'est elle pas redondante avec celle définie ici

html	{
height: 100%;
}



cette dernière définition est elle indispensable ?

jacques
suite de l'exploration min height
en suivant vos conseils je résous bien le problème sur IE7 PC ainsi que sur Firefox et safari sur mac, (grace a raphael …… toujours, encore merci)
avec du texte court
http://desjeuxcreations.fr/cestfou.html

et du texte long
http://desjeuxcreations.fr/cestfou2.html

mais IE6 pc lui ne digère pas mon texte court
http://desjeuxcreations.fr/cestfou.html
ma bande jaune s'arrete à la fin du texte !

Il faut un hack aussi pour IE6 ? j'ai l'impression d'avoir mis le doigt dans un truc hyper compliqué des css ……
Smiley sweatdrop
Le code CSS suivant :
html, body {bla: bla;}

est l'équivalent exact de ceci :
html {bla: bla;}
body {bla: bla;}


Donc oui, si tu as deux fois la même propriété pour le même sélecteur, la deuxième écrasera la première. À moins que ça ne soit spécialement voulu, tu as sans doute une déclaration de trop. Tu devrais pouvoir virer ton deuxième html {height: 100%;}.
Bonjour,

Tu testes avec une version "installée" ou alone d'ie6 car il me semble voir un commentaire conditionnel pour ie6 ?
Si tu utilises une version alone, les commentaires conditionnels pour ie6 ne sont pas pris en compte (ton ie6 alone se comporte comme ie7).
A priori ton commentaire conditionnel devrait être ok pour ie6, teste ta page que sur ie6 avec 
#contenu{
width:20em;
position:absolute;
left:0;
top:0;
background-color: yellow;
height: 100%;
}


Qu'est ce qu'on s'amuse avec IE Smiley biggol
ghost a écrit :
Bonjour,

Tu testes avec une version "installée" ou alone d'ie6 car il me semble voir un commentaire conditionnel pour ie6 ?



au risque de passé pour un imbécile .... je ne connais pas la différence entre "installée" et alone, je suis sur mac-intel avec parrallels installé pour basculer d'un environnement mac à windows. Et sur la session windows j'ai installé les deux versions d'explorer.

par contre c'est vrai qu'est ce qu'on rigole avec IE .... je n'en peux plus

jacques
Sujet clos
Aller à