Well, autant te prévenir tout de suite, ça va être la merde. Principalement parce que CSS n'a pas vraiment été prévu pour ça.
Primo, lorsque tu veux une hauteur relative à l'élément parent, tous (et absolument tous) les éléments parents doivent avoir soit une hauteur relative au parent ou alors fixe (en px, em, ...). Dans ton cas, ce sont les éléments : html, body, div#main, div#display_div, qui doivent avoir la propriété "height: 100%;". On voit direct qu'avec "width", c'est plus simple : il prend la place qui est libre.
Deuxio, en mode "standard compliant", une hauteur/largeur est définie comme la hauteur/largeur du contenu, plus l'épaisseur de la bordure, plus les marges, plus le padding. Et là c'est la merde.
Avec la largeur tu peux mettre deux div imbriqués, avec un width: auto et une marge sur le div interne pour avoir une boite de la largeur de ta fenêtre et une marge à gauche ou à droite. Avec la hauteur height: auto ne marche évidemment pas du tout comme width: auto (logique, le texte occupe d'abord toute la largeur, puis s'étale en hauteur).
Solution: le seul truc qui fonctionne pas trop mal, c'est de mettre un bout de javascript sur l'événement onresize et en calculant la taille des éléments à la main. Autant dire, qu'il y a intérêt à ce que ça en vaille la peine.
Edit: si ta zone rouge au dessus de ta zone bleue est fixe, tu peux aussi positionner ta zone bleue en absolute.
Message édité par tpierron le 23-10-2008 à 17:16:57