Cas général

Pour tous les navigateurs modernes et respectueux des standards, il est possible de préciser une hauteur minimale pour les éléments de type bloques. On utilisera pour cela la proprièté CSS min-height. De la façon suivante par exemple :

#monBloque
{
      /* monBloque ne fera donc jamais moins de 50px de haut */
      min-height:50px;
}

Le cas d'Internet Explorer

Comme je le disais plus haut, ce cher IE ne connaît pas la propriété min-height. Cependant, le comportement de IE pour un bloque dont le height (hauteur) est définit est le même que pour un min-height. Comprenez par là que IE agrandira un bloque si le contenu est trop grand, et ce même avec un height fixé. Nous allons pouvoir exploiter cette faiblesse!

La solution!

Nous allons devoir définir le height à une hauteur particulière pour IE, et le laisser en auto pour les autres navigateurs. Nous définirons également le min-height à cette valeur particulière, il sera ignoré par IE et correctement interprété par les autres navigateurs.

En fin de compte, l'objectif est donc de définir une propriété supplémentaire pour IE, et seulement pour IE.

Pour cela, il existe différentes solutions :

Syntaxe CSS non comprise par IE

#monBloque
{
      /* min-height pour tous, ligne ignorée par IE */
      min-height:50px;
 
      /* Height pour IE */
      height:50px;
}
 
/* Syntaxe non comprise par IE, bloque ignoré */
html>;#monBloque
{
      /* Seul IE ne tiendra pas compte de cette ligne*/
      height:auto;
}

Les commentaires conditionnels

Si vous ne souhaitez pas avoir de feuille CSS supplémentaire, oubliez cette solution. Cela-dit, il est parfois pratique d'avoir une seconde feuille CSS dans laquelle vous pourrez placer toutes les modifications ou ajouts de propriétés spécialement destinés à IE. Libre à vous de choisir.

Nous allons exploiter ici ce que l'on appel les commentaires conditionnels. C'est un système proposé par Internet Explorer et permettant d'ajouter du code spécifiquement pour IE. Ce code sera considéré comme commentaire html par les autres navigateurs.

La syntaxe à utiliser est la suivant :

<!--[if IE]>

   ..ici, code HTML réservé à IE...
<![endif]-->

Je ne détaillerais pas plus la syntaxe de ces commentaires. Sachez cependant qu'il est possible de les préciser avec les version d'IE. Je vous laisse consulter l'article qui en parle en détail.

Il nous est maintenant possible de spécifier une feuille CSS supplémentaire spécifiquement pour IE de la façon suivante :

<!-- debut de votre page -->
      <head>
            <!-- Ci dessous, votre feuille CSS normale -->
            <link rel="StyleSheet" type="text/css" href="style.css />
            <!--[if IE]>
                  <!-- Et ici celle pour IE -->
                  <link rel="StyleSheet" type="text/css" href="style-ie.css />
            <![endif]-->
      </head>
<!-- suite de votre page -->

Ainsi dans style.css vous aurez les définition suivantes :

#monBloque
{
      min-height:50px;
}

et dans style-ie.css :

#monBloque
{
      /* Resta à auto pour les autres */
      height:50px;
}

Conclusion

Cette solution devrait également fonctionner pour width et min-width. À tester.

J'espère que tout le monde aura vu dans cette article une raison de plus pour utiliser un navigateur respectueux des standards!