[IE7] comment faire un "min-height" sous IE7 ?

Voilà mon problème : dans un site quelconque, comment faire un "div" global qui puisse s'allonger si le contenu dépasse la hauteur de l'écran, jusqu'en bas. Par exemple, pour mettre un joli fond.

Sous Firefox, on a une jolie propriété appelée "min-height".

Sous IE6, la propriété "height" a la bonne idée de fonctionner comme un "min-height".

Donc j'avais fait un code CSS comme ceci :

height: auto;
min-height:100%!important;
/height:100%;
_height:100%;

A noter que le "height:auto;" était semble-t-il facultatif.

La ligne "min-height:100%!important;" est un hack pour FireFox, la suivante est sensée l'être pour IE7 et la ligne "_height:100%;" est un hack IE6.

- Et de plus, comme j'avais des boîtes "float", des boîtes flottantes, au sein de mon conteneur global, j'ai mis ensuite une boite "séparateur" avec un "clear:both;" afin de forcer mon conteneur global à s'allonger.

Résultat :

FF OK, IE6 OK, IE7 PAS OK !

- J'ai essayé d'autres trucs. Notamment cette ruse trouvée sur ce forum, mais elle ne fonctionnait pas non plus sous IE7.

- La seule chose qui aie marché est une astuce suggérée par un copain webmaster, mais il ne sait pas lui même pourquoi ça marche.

J'ai conservé mes div séparateurs afin de forcer les boites flottantes à s'allonger au sein du conteneur global, mais le conteneur global, j'ai viré tous les hacks et j'ai mis uniquement ceci :

background:url(fonds/texture_bois1.gif) top left repeat;

Le background y était déjà mais il m'a dit de rajouter " top left repeat".

Et là, ça marche !!!

Et je ne comprends pas du tout pourquoi :
1) Le code précédent ne marchait pas sur IE7 alors que bien sur IE6 ?
2) Je ne comprends pas non plus pourquoi ce code-ci marche, par contre ?

Est-ce que quelqu'un peut m'expliquer svp ???

Merci d'avance !

PS :

L'adresse de mon site : www.auxplaisirsdubois.com

Hello Shimrhod,
Je tiens à préciser que je suis débutant et donc que ce que je dit n'est pas forcément exacte...

Alors moi je comprend pas trop ta manière de faire pour rendre la hauteur de ton site flexible...
Il me semble qu'une div prend automatiquement la taille de sont contenu si celle-ci ne possède pas de width et height défini en pixel, % em...
Du coup si tu ne met aucun height auto... cela devrait fonctionner de la même façon...
Enfin pour ce qui est de top left repeat, tu signale par un code (qui me semble serait certainement plus joli dans une feuille de style) que ton image doit être placé en haut à gauche de ton div et que celui-ci doit être répété autan de fois que nécessaire pour remplir le div aussi bien en hauteur que en largeur...
En gros ce que je te conceil (c'est mon avis de débutant) c'est de faire quelque chose comme ça:
C'est ce que j'aurai fait, mais après je n'est pas testé.
Dans une feuille de style:

#contenu {
background-image:url("fonds/texture_bois1.gif"); //ne pas oublier les guillemets...
background-repeat: repeat-x; // l'image de fond ce répète en hauteur repeat-y si tu veux qu'elle ce répète en largeur ou repeat tous court pour les deux sens...
background-position: top left; //place l'image en haut à gauche
}

valable si ton div général pren comme identifiant id="contenu" ...

Enfin, (je pense que c'est ce que tu as fait) pour ton image de fond elle devrait prendre 1px de haut. Plus serait inutile...

En espérant ne pas avoir dit trop de bêtise.. je te souhaite bonne continuation

EDIT
Pour ce qui est d'allonger ton contenu, peut être peut tu utiliser un padding-bottom dans ta feuille de style.. Après il faut voir comment sont organisés tes bloc..
Modifié par Dim (21 Jul 2008 - 09:54)

Salut,

hack CSS == evil

Utiliser des commentaires conditionnels pour IE t'éviterait ce genre de désagrément, puisqu'ils permettent de cibler précisément les versions d'IE qui doivent tenir compte des corrections.

D'autre part, IE7 comprend la propriété min-height et l'interprète correctement, il me semble. Je pense qu'il faut chercher la source du problème ailleurs, si les commentaires conditionnels ne le résolvent pas.

Salut,

Dim a écrit :
Il me semble qu'une div prend automatiquement la taille de sont contenu

C'est vrai lorsque le div en question est placé naturellement dans le flux. En float il est sorti du flux et il faut alors éviter qu'il dépasse de son conteneur.

A+

Merci heyoan pour cette precision...
D'ailleurs ca ma fait tilte cette nuit...
Pour le lien que tu donne je suis deja tombe dessus mais j'ai jamais vraiment compris l'interet de la pseudo classe after...
Bonne journee
Modifié par Dim (21 Jul 2008 - 09:55)