Calcul d'une hauteur en css, est-ce possible ?

Version imprimable

09/04/2013, 10h09
Stephane_br

Calcul d'une hauteur en css, est-ce possible ?
Bonjour,

Est-il possible de calculer une hauteur dans une feuille de style ?
Je m'explique :

J'ai un body qui fait en hauteur : height:100%.
J'ai un bloc <div id='MAIN'></div> qui n'a pas de hauteur définie car sa hauteur change selon son contenu. Oui, en fait ce bloc est dans une masterpage et son contenu est donc rempli différemment dans chacune des pages du site.

Enfin, c'est là mon problème, en dessous de ce bloc, j'ai un autre bloc <div id='BAS'></div> qui contient un contenu fixe qui ne bougera pas. Et j'aimerais le coler juste en dessous du premier bloc et l'étirer jusqu'en bas de la fenêtre du navigateur, quelque soit sa taille ou le support utilisé (PC, tablette, Smartphone)....

En gros, est-il possible de faire un truc du genre :
BAS.heigth = BODY.height - MAIN.height;
Code:

1 2 3 4 <body> <div id=MAIN>Hauteur dynamique et différente selon les pages du site</div> <div id=BAS>Contenu fixe. Ce bloc doit s'étirer jusq'en bas de ma fenêtre si possible</div> </body>
Sachant que mon body possède une image en wallpaper, mon bloc MAIN doit être transparent pour laisser apparaître l'image en font et fait 100% en largeur. Enfin, mon bloc BAS lui a un fond de couleur unie et verte et fait également 100% en largeur.
Dans mon bloc MAIN, il va y avoir aléatoirement des blocs de hauteur définie ou pas. Je sais pas trop si je suis clair ??? :roll:

Je sais que cela doit être réalisable avec des tableaux mais j'aimerais ne pas utiliser de tableau autant que possible. Je voudrais savoir si cela est faisable en CSS directement ??

Merci pour votre aide.
09/04/2013, 10h44
Bovino
Non, ce n'est pas possible si tu ne connais pas au moins une des dimensions.

Sinon, CSS 3 permet d'effectuer des calculs du type
Code:

1 2 3 .elem{ height: calc(100% - 50px); }
Ne pas oublier de prévoir les préfixes navigateur. ;)
09/04/2013, 14h39
Stephane_br

Bonjour et merci pour votre réponse.
Bon bé je vais devoir me tourner vers une autre solution pour faire cela. :(
Merci.
09/04/2013, 20h23
Invité
Citation:
Envoyé par Bovino

CSS 3 permet d'effectuer des calculs du type

Code:

1 2 3 .elem{ height: calc(100% - 50px); }

Ne pas oublier de prévoir les préfixes navigateur. ;)
Merci Bovino, j'ai encore appris une chose grace à toi. ;)
Question : que veux-tu dire par "prévoir les préfixes navigateur" (comment ?) ?

Code:

1
2
3
4
5
6
7
.elem{
    height: -moz-calc(100% - 50px);
    height: -webkit-calc(100% - 50px);
    height: -o-calc(100% - 50px);
    height: -ms-calc(100% - 50px);
    height: calc(100% - 50px);
}