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

**Stephane_br** · 09/04/2013, 10h09

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ???

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.

**Bovino** · 09/04/2013, 10h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ne pas oublier de prévoir les préfixes navigateur.

**Stephane_br** · 09/04/2013, 14h39

Bonjour et merci pour votre réponse.
Bon bé je vais devoir me tourner vers une autre solution pour faire cela.

Merci.

Invité · 09/04/2013, 20h23

Envoyé par Bovino

CSS 3 permet d'effectuer des calculs du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?) ?

**Bovino** · 09/04/2013, 21h02

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

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

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager