Note : J'ai écris cette note fin août. J'avais oublié de la terminer et de la publier... Je ne sais pas si IE7 supporte ou non les fonctions utilisées dans ce billet. Je viens de trouver un petit bug CSS dans Safari.

Je voulais diviser un calques en 3 parties horizontales. Les parties du haut et du bas ont une hauteur fixe et la hauteur de la partie centrale s'adapte toute seul en fonction de la hauteur du calque conteneur. J'ai mis longtemps avant de trouver une méthode efficace pour réaliser ce type de design. La technique que j'ai décidé d'utiliser est de positionner les éléments à l'aide leur propriétés top et bottom.
Nous avons donc :
  • Un calque "conteneur" positionné en relatif
  • Un calque "entete" positionné en absolue avec son top à 0 et une hauteur fixe
  • Un calque "central" positionné en absolue avec son top égal à la hauteur de l'en-tête et son bottom égal à la hauteur du pied de page
  • Un calque "pied" lui aussi en absolue avec son bottom à 0 et une hauteur fixe
Ce qui nous donne la page suivante :
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div id="conteneur">
      <div id="entete">En-tête de la page</div>
      <div id="central">Contenue de la page</div>
      <div id="pied">Pied de page</div>
    </div>
  </body>
</html>
Pour l'instant, tout va bien ;-)

Cette technique utilise le fait qu'en CSS2 la hauteur d'un élément peut être déduite des propriétés top et bottom (idem pour la largeur et left/right).
Mais il y a un problème, comme d'habitude, avec Internet Explorer. Internet Explorer ne respecte pas cette règle. Quand un élément à son top et son bottom spécifié, IE ne prend en compte que le top et considère qu'il n'y a pas de hauteur spécifié (encore une fois, ces pareil avec left et right). Pour contourner ce problème, j'utilise deux astuces propres à Internet Explorer. La première, est un bug d'IE qui fait qu'il ne prend pas en compte les underscores (_) devant les propriétés CSS. Par exemple, la propriété _height n'existe pas en CSS. les navigateurs standards ne la prennent pas en compte, mais IE considère qu'il a alors affaire à la propriété height. Bizarre ! Mais pour une fois qu'un bug d'IE nous rend service ! L'autre astuce est le fait qu'IE accepte que les valeurs des propriétés CSS puisse être déduite d'une expression javascript. Cela se fait avec la balise expression().
Donc, il me suffit de définir la hauteur de mon calque central égal a la hauteur du calque conteneur diminuer des hauteurs de l'en-tête et du pied de page. Bien sur ce calcul ne doit être fait que par IE ! Cela donne : _height: expression((this.parentNode.offsetHeight-100)+'px');

Voilà pour ma méthode. Elle est sans doute améliorable, mais pour l'instant elle a pour avantage de pouvoir être appliquée sans même réfléchir !

Nous avons donc le CSS : 
#conteneur {
        position: relative;
        width: 100%;
        height: 100%;
}       
#entete {
        position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        top: 0; 
        background: red;
}       
#central {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50px;
        bottom: 50px;
        _height: expression((this.parentNode.offsetHeight - 50 - 50) + 'px'); /* hack IE */
        background: blue;
}       
#pied { 
        position: absolute;
        width: 100%;
        height: 50px;
        bottom: 0;
        background: green;
}
Ce qui m'amène à mon bug sous Safari. Reprenons l'exemple précèdent. Si maintenant, je souhaite placer dans mon calque central un calque qui occupe la moitié l'espace disponible en hauteur (donc avec height: 50%). Mais sur la version actuelle de Safari, à savoir la 2.0.4 (419.3), un bug fait que Safari ne prend pas en compte les hauteurs indiqué en relatif des éléments contenu dans des calques dont la hauteur est déduite d'un placement avec le top et le bottom... Un test simple : 
<html>
  <head>
    <style>
      #div1 {
        position: absolute;
        width: 100%;
        left: 0;
        top: 10px;
        bottom: 10px;
        _height: expression((this.parentNode.offsetHeight -10 - 10) + 'px'); /* hack IE */
        background: blue;
      }
       #div2 {
        height: 50%;
        background: red;
      }
   </style>
  </head>
  <body>
    <div id="div1">
      <div id="div2">Coucou</div>
    </div>
  </body>
</html>

Safari.... Buggé
Firefox ou tout autre navigateur nom buggé...
La seul solution que j'ai trouvé pour corrigé ce bug est d'utiliser le javascript pour corriger la taille des éléments qui peuvent poser problème dans Safari. Ce script doit être appelé a chaque fois qu'un éléments positionné avec un top/bottom est amené à changer de taille. Particulièrement énervant et peu efficace.

En téléchargement la dernière béta de WebKit, le problème est réglé, mais Apple n'a pas encore daigné mettre à jour la version courante de Safari...