Expression(document.body.clientHeight) dans Firefox

Bonjour,

J'ai une mise en page avec :
- un header de hauteur fixe : 85px
- un menu horizontal de hauteur fixe : 33px
- un contenu de hauteur variable
- un pied de page de hauteur fixe : 25px

Pour calculer le height et le min-height de mon contenu, j'ai placé le css suivant:

min-height: expression(document.body.clientHeight - 143 + "px");
height: expression(document.body.clientHeight - 143 + "px");

Cela fonctionne très bien sous IE7 mais pas sur Firefox où les deux (height et min-height) restent à 0px

Avez-vous une idée?

Bonjour,

En CSS, expression() est un méchanisme propriétaire spécifique à IE. Il ne fait pas partie de la spécification CSS. Il ne sera pas compatible avec Firefox, Safari, Chrome, Opera, ou tout autre navigateur qu'Internet Explorer. Il n'est pas non plus compatible avec IE8 car le support de ce méchanisme a été supprimé dans IE8. C'est donc une impasse totale.

Que fait cette syntaxe? Elle permet d'exécuter un code JavaScript et d'utiliser la valeur retournée comme valeur d'une propriété CSS. Conclusion: vu qu'il s'agit d'exécuter du JavaScript, il est préférable de le faire... en JavaScript, en dehors du code CSS.

Une autre question qu'on peut se poser est: est-ce réellement utile? Si le but est de figer la hauteur d'un conteneur principal à 100% de la hauteur de la zone de visualisation du navigateur, moins un certain nombre de pixels en haut et en bas... cela se gère en utilisant le positionnement absolu et les coordonnées top et bottom. Ce ne sera pas compatible avec Papy IE6, par contre, et pour ce dernier il faudra soit se contenter d'un rendu dégradé, soit passer par une fonction JavaScript réservée à IE6.

Dans tous les cas, gérer finement la hauteur de blocs par rapport à la hauteur de la zone de visualisation du navigateur n'est jamais facile en CSS. Le concept de «prendre l'espace vertical qui reste» n'existe pas. Il y a des techniques (dont une évoquée au paragraphe précédent), mais ces techniques ont des limites. Enfin, il faut penser à l'expérience utlisateur: ce type d'interface étant rare sur le Web (surtout pour un site de contenu), en proposer une à l'utilisateur peut être plus perturbant que séduisant. Surtout si l'implémentation laisse à désirer, gère mal un certain nombre de cas de figure, etc.

Merci, pour cette réponse claire et détaillée.


En fait, il s'agit d'une application intranet pour un secteur industrielle.
L'application n'aura pas à supporter IE6 (c'est déjà ça de gagner... )
Le support de Firefox n'est pas demandé mais je préférais anticiper!
De toute manière comme tu me dis que IE8 ne supporte plus la fonction, je suis obligé de changer de méthode