Afficher une div de hauteur (100% - 50px)

**identifiant_bidon** · 31/07/2013, 07h33

Bonjour à tous,

Je voudrais savoir comment je dois m'y prendre si je veux afficher une div qui formerait un bandeau en hauteur. Ce bandeau commencerait à 50px du bas et finirait en haut de ma page (En gros 100% - 50px).
Il faudrait bien sur une solution compatible tous navigateurs si possible.

Merci

**rodolphebrd** · 31/07/2013, 07h51

Bonjour,

Box-sizing le permet :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
html,body {
    margin:0;
    padding:0;
    height:100%;
}
.conteneur {
    height:100%;
    background-color: #f00;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom:50px;
}
.content {
    background-color: #fff;
    width:100%;
    height:100%;
}
</style>
</head>
 
<body>
<div class="conteneur">
    <div class="content">
    </div>
</div>
</body>
</html>

**Bovino** · 31/07/2013, 08h59

Ou sinon

Code :

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

height: calc(100% - 50px);

Il faudrait bien sur une solution compatible tous navigateurs

Ca va être difficile : certains navigateurs anciens (IE3- ou Netscape4- par exemple) ne prennent pas en compte les feuilles de style !

**Candygirl** · 31/07/2013, 10h30

Hello,

La méthode la plus rétrocompatible (IE7+) est probablement à l'aide d'un positionnement absolu:

Code :

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

1
2
3
4
5
6
7
8
9
10
html,body {
  height:100%;
  margin:0;padding:0;
}
 
div {
  position:absolute;
  top:0;
  bottom:50px;
}

**Zayon** · 06/08/2013, 12h05

Bonjour,

pour une compatibilité avec IE8 tu peux faire:

Code :

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

height: expression((document.documentElement.clientHeight-50) + "px");

Normalement documentElement te renvois sur l'élément racine de l'élément sur lequel tu applique ton css, tu récupère la hauteur en entier à laquelle tu retire 50.
Par contre c'est pas très propre comme méthode et ça joue sur les perfs.

EDIT: dans ton cas tu peux faire:

Code :

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

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

Afficher une div de hauteur (100% - 50px) [CSS 2.1]

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager