Partage

[css]définir une hauteur minimale

1 2 >>

Anonyme

21 décembre 2005 à 20:10:08

alors voila, j'ai un div dans lequel je defini un height:500px; lorsque mon contenu est inferieur a une hauteur de 500px, tout va bien. le problème arrive quand mon contenu dépasse les 500px, le reste du contenu s'affiche hors de mon div. si je ne met pas le height:500px; ca fonctionne tres bien sauf que lorsque mon contenu est tres court, j ai un cadre tres petit. ce que je voudrais c'est avoir mon div d une hauteur minimum de 500px; et extensible à "l'infini".

merci d'avance pour vos reponses

yöm

21 décembre 2005 à 20:19:13

http://wiki.media-box.net/documentation/css/min-height

Anonyme

21 décembre 2005 à 20:29:18

un grand merci

yuston

21 décembre 2005 à 22:06:05

Attention IEn'est pas capable de comprendre correctement cela...

Sinon voici une technique utilisée par Openweb:

#page{
/* permet de fixer une hauteur mini sur les navigateurs modernes */
min-height:55em;
/* pour obtenir le même effet sur IE, sachant que si le contenu dépasse, il
"poussera" la hauteur en ne respectant pas la norme. On se joue de ses lacunes
*/
height:55em;
}

Anonyme

21 décembre 2005 à 23:00:46

mais en definissant un height, firefox pousse il le contenu aussi?

yuston

22 décembre 2005 à 16:19:43

Avant de poser cette question tu aurais pu tester seul...

Normalement tout marche bien avec ce code...

Anonyme

22 décembre 2005 à 22:21:44

justement, si je pose la question, c'est parceque ca ne fonctionne pas... le cadre ne s allonge plus si le height est défini.

edit: sur firefox il ne s'allonge pas, sur ie bien

Anonyme

23 décembre 2005 à 22:49:57

mebon

23 décembre 2005 à 22:56:43

il faut mettre le min-height pour tout le monde (sachant que IE ne s'en préoccupera pas) et le height que pour IE par contre en faisant

* html #page { height:55em; }

Anonyme

23 décembre 2005 à 23:09:16

je comprend pas bien ton code mebon, pourquoi en rajoutant $html, il n y aurait que ie qui s en preoccupe?
qd je met une * ds mon css, il l interprete comme le debut d un commentaire, donc le caractère * n'a pas l air d avoir le moindre effet

Pandore

23 décembre 2005 à 23:13:04

euh ... t'es sûr là, car en css les commentaires commencent par /* et pas par *

Anonyme

24 décembre 2005 à 0:05:22

oui je sais mais j avais cru voir mon colorateur synthaxique prendre la couleur des comments

et en fait non..
mais ca regle toujours pas mon problème, je vois pas comment *html dit a mon css que c est juste pour ie :s

mebon

24 décembre 2005 à 0:26:30

* html #page { etc }
dit d'appliquer la propriété à un truc avec un id div, qui se trouve dans une balise html, qui se trouve dans n'importe quelle autre balise. le <div id="page"> a bien pour id page ok. il est bien dans une balise <html> ok. mais la balise html elle, elle est dans rien du tout. sauf pour IE qui lui va savoir pourquoi imagine qu'y a encore une balise en dehors de tout ça, et donc applique les propriétés. mais firefox et tous les autres sont pas cons et voient bien qu'y a pas lieu de les appliquer.

en css y'a souvent des "hack" comme ça basés sur les bugs et particularités de certains navigateurs.

Anonyme

24 décembre 2005 à 12:25:20

merci pour l explication. j ai compris a quoi sert le html, mais pas le *

atly

24 décembre 2005 à 12:28:19

Le * est le sélecteur universel.
Tout bêtement.
Si tu fais

* {border:1px solid green;}

Tu auras.. un résultat tout bonnement affreux !

Edit : Et à ta guise.

mistike

24 décembre 2005 à 12:35:26

Citation : yuston

Attention IEn'est pas capable de comprendre correctement cela...

Sinon voici une technique utilisée par Openweb:

#page{
/* permet de fixer une hauteur mini sur les navigateurs modernes */
min-height:55em;
/* pour obtenir le même effet sur IE, sachant que si le contenu dépasse, il
"poussera" la hauteur en ne respectant pas la norme. On se joue de ses lacunes
*/
height:55em;
}

Faudrait pas faire plutôt le contraire ??? (me grondez pas, j'ai pas testé

)

#page{
/* Tous les browsers lisent : mon div il fait 55em. Pas plus, pas moins. IE lui il a séché les cours et il comprend "ouais bon je l'adapte si le contenu fait plus que 55em" */
height:55em;

/* Les browsers autres que IE lisent : ah ben non, il fait 55em minimum. IE lui il comprend pas ce que ça veut dire et il reste à son instruction d'en haut. */
min-height:55em;
}

Nan ? Parce que moi, si j'étais un browser, ton code je le lirais comme ça :

#page{
/* Tout le monde lit "mon div il fait 55em Minimum". IE a encore seché les cours et il lit : "hein ? quoi ?" */
min-height:55em;
/* Et là tout le monde lit "mon div il fait 55em point barre". Sauf IE qui lit "il fait 55em minimum" */
height:55em;
}

Nan ?

atly

24 décembre 2005 à 12:38:21

Sinon Benzawal, tu n'est pas obligé d'utiliser la technique du sélecteur universel qui serait parent de la balise html.
Il ya d'autres techniques équivalentes, mais dans l'autre sens: comme par exemple utiliser d'autres sélecteur que IE ne comprend pas...

Hells_Dark

24 décembre 2005 à 12:45:15

Juste un petit post pour donner mon avis sur IE.
Je pense qu'il est temps de se demander s'il faut encore se préocupper de ce genre de soucis puisque IE 7 comprendra le min-height ainsi que les selecteurs. Ne serait il pas enfin temps d'abandonner toutes ces petites erreurs ?
Je crois me souvenir que Mircosoft nous demandait de ne plus ajouter ces petits "cracks valides du w3c

" afin justement que les gens se mettent à jour & co.
Bien sur, un "extremiste de l'accessibilité" (oui, vous pouvez hurler, vouloir que son site soit accessible sur des versions antérieures des navigateurs n'est pas être extremiste

) vous dira "et ceux qui utilisent encore IE <7 (c'est à dire tout le monde pour le moment, je suis au courant

)? ...A vous de voir

Si on conserve ces cracks pour pouvoir être accessibles pour les vieux navigateurs... Je me demande alors pourquoi on veut que IE comprenne les min-height par exemple puisque meme quand il corrige l'erreur, on continue à coder bizarrement pour les vielles versions :-°

atly

24 décembre 2005 à 13:14:38

Bah. Il faut bien penser à ceux qui utilisent des navigateurs antiques.Même si ceci n'est qu'en dernier recours. Il faut viser à coder proprement, c'est tout.
Mais dans le cas du min-height, qui peut être très utile si par exemple on a un design fixe sur lequel on souhaite mettre un background en déco' sur une zone dont la taille dépend du contenu, si le contenu est vide, la taille est basse, et les déco's ne fonctionnent pas. Ou alors par pure raisons esthétiques.
Sinon, pour le min-height, y'a d'autres manières de contourner encore pires que les détournements CSS, par exemple foutre un div à l'intérieur du bloc dont on veut fixer la hauteur minimale, ce div ayant une hauteur donnée histoire de faire du "remplissage"...

jp949

24 décembre 2005 à 13:34:17

et pour en revenir au sujet du post je pens qu'il faut coder height en 1er et min-height apres.En css c'est la derniere proprieté qui est prise en compte
IE ne sachant pas interpreter le min-height donc pas de probleme pour lui la derniere sera toujours height

mebon

24 décembre 2005 à 13:43:46

Non mais mettre min-height avant ou après height ne changera rien pour firefox. Ce sont deux propriétés différentes, donc quel que soit l'ordre, il va interpréter les deux. Le résultat va en fait être que firefox va appliquer une hauteur fixe au bloc (comme si y'avait que height) dont la valeur sera le plus grand entre min-height et height.
Donc il faut obligatoirement utiliser un hack quelconque pour parler qu'à IE (ou qu'aux autres).

jp949

24 décembre 2005 à 13:47:29

peut-etre pas testé donc on revient a
" ! important " ou aux " commentaires "

Anonyme

24 décembre 2005 à 16:06:02

Citation : Hells_Dark

Juste un petit post pour donner mon avis sur IE.
Je pense qu'il est temps de se demander s'il faut encore se préocupper de ce genre de soucis puisque IE 7 comprendra le min-height ainsi que les selecteurs. Ne serait il pas enfin temps d'abandonner toutes ces petites erreurs ?
Je crois me souvenir que Mircosoft nous demandait de ne plus ajouter ces petits "cracks valides du w3c " afin justement que les gens se mettent à jour & co.
Bien sur, un "extremiste de l'accessibilité" (oui, vous pouvez hurler, vouloir que son site soit accessible sur des versions antérieures des navigateurs n'est pas être extremiste ) vous dira "et ceux qui utilisent encore IE <7 (c'est à dire tout le monde pour le moment, je suis au courant )? ...A vous de voir

Si on conserve ces cracks pour pouvoir être accessibles pour les vieux navigateurs... Je me demande alors pourquoi on veut que IE comprenne les min-height par exemple puisque meme quand il corrige l'erreur, on continue à coder bizarrement pour les vielles versions

j pense qu'on pourra commencer à faire ca dans un an ou deux, quadn ie7 sera sorti et qu il sera plus répendu que le 6. en attendant, faut trouver des astuces.. pcq même si la plupart des gens qui fréquentent ce forum tournent sur firefox, c est encore loin d être le cas de la plupart des surfers.

pour ce qui est du hack pour le min-height, ca fonctionne parfaitement maintenant, merci mebon et les autres.

Anonyme

27 décembre 2005 à 20:16:17

heu non, en fait ca fonctionne que sous ie... j'ai remi la config d'origine..
le code que j dois mettre pour que ca fonctionne sous les deux navigateurs, c'est bien

* html #contenu { height:560x; }
#contenu
{
margin-left: 180px;
margin-bottom: 20px;
background-color: #efefef;
border: 1px;
border-style: dotted;
border-color: #750706;
min-height:560px;
background-image:url("images/titrecontenu.jpg");
background-repeat: no-repeat;

}

Hells_Dark

28 décembre 2005 à 13:53:02

Citation : Benzawal

Citation : Hells_Dark

Juste un petit post pour donner mon avis sur IE.
Je pense qu'il est temps de se demander s'il faut encore se préocupper de ce genre de soucis puisque IE 7 comprendra le min-height ainsi que les selecteurs. Ne serait il pas enfin temps d'abandonner toutes ces petites erreurs ?
Je crois me souvenir que Mircosoft nous demandait de ne plus ajouter ces petits "cracks valides du w3c " afin justement que les gens se mettent à jour & co.
Bien sur, un "extremiste de l'accessibilité" (oui, vous pouvez hurler, vouloir que son site soit accessible sur des versions antérieures des navigateurs n'est pas être extremiste ) vous dira "et ceux qui utilisent encore IE <7 (c'est à dire tout le monde pour le moment, je suis au courant )? ...A vous de voir

Si on conserve ces cracks pour pouvoir être accessibles pour les vieux navigateurs... Je me demande alors pourquoi on veut que IE comprenne les min-height par exemple puisque meme quand il corrige l'erreur, on continue à coder bizarrement pour les vielles versions

j pense qu'on pourra commencer à faire ca dans un an ou deux, quadn ie7 sera sorti et qu il sera plus répendu que le 6. en attendant, faut trouver des astuces.. pcq même si la plupart des gens qui fréquentent ce forum tournent sur firefox, c est encore loin d être le cas de la plupart des surfers.

pour ce qui est du hack pour le min-height, ca fonctionne parfaitement maintenant, merci mebon et les autres.

Juste pour info, Microsoft appelle à l'arret des hacks css

strucky

28 décembre 2005 à 15:56:52

Citation : Hells_Dark

Juste pour info, Microsoft appelle à l'arret des hacks css

Je crois rêver o_O

Au lieu de faire appel à l'arrêt des hacks, ils feraient mieux d'arrêter de perdre leur temps à dire des c.... et de l'utiliser judicieusement pour mettre leur cher navigateur aux normes actuelles.

Non mais :colere:

Combien se cassent la tête (moi y compris), afin de rendre compatible leur site avec ce "navigateur" envers lequel j'ai une haine de plus en plus profonde.

Voilà, désolé fallait que je réagisse :-°

Anonyme

28 décembre 2005 à 16:29:52

et pour mon problème?

strucky

28 décembre 2005 à 16:54:18

C'est quoi qui ne fonctionne pas ?

Car j'ai testé ton code que tu as mis ci-dessus, et ça fonctionne correctement avec IE et FF.

Sauf bien sûr l'image qui ne se répète pas dans ton <div>, mais comme tu as mis no-repeat, je pense que c'est voulu.

Anonyme

28 décembre 2005 à 16:58:08

bon, j m decide a poster l url de la page, ca sera ptet plus facile
la d ou viennent tous mes problèmes

strucky

28 décembre 2005 à 17:08:17

Désolé,

Mais le problème se situe où exactement sur ta page ?

Pas mal ton design, j'aime bien

Par contre le premier post :-°

1 2 >>