CSS - Utilisation de min-height, max-height avec IE

Auteur : 3L!X | Créé le : 04/08/2007 à 19H30 (Source : forum.alsacreations.com)

Les versions antérieures à Internet Explorer 7, ne comprennent pas les propriétés CSS "min-height" et "min-height".
Nous allons donc utiliser une méthode avec du Javascript, afin de reproduire le même résultat.

Pour le cas de "min-height"

<style type="text/css">
div { min-height: 500px; }
</style>

<!--[if lt IE 7]>
	<style type="text/css">
	div { height: 500px; }
	</style>
<![endif]-->

IE n'interprête pas correctement la propriété "height" et la considère comme "min-height" : elle s'allongera en fonction du contenu.
Il suffit donc d'indiquer une hauteur (height) uniquement à IE6, et une hauteur minimale (min-height) pour les autres navigateurs.

Pour le cas de "max-height"

<!--[if lt IE 7]>
	<style type="text/css">
	div {
		height: 500px;
		overflow: hidden;
		height: expression(this.scrollHeight > 800? "800px": "auto");
	}
	</style>
<![endif]-->

Explication : Si la hauteur de la fenêtre est supérieure à 800px, alors elle sera forcée à 800px. Dans le cas où, le JavaScript est inactif, la hauteur sera de 500px.

[0] commentaire - Voir/Editer