Diviser la page en trois blocs qui s'adaptent à l'écran

**Bellumm** · 25/09/2013, 11h30

Bonjour,

Je cherche à diviser une page en trois blocs. Deux d'entre eux ont une hauteur fixe et l'autre prend la hauteur maximale restante pour que la page ne soit pas plus grande que l'écran du visiteur.

Je m'explique :
> header
- width: 100%
- height: 5em
- collé en haut de la page

> body
- width: 100%
- height: maximum possible pour que la hauteur totale de la page ne dépasse pas hors de l'écran

> footer
- width: 100%
- height: 4em
- collé en bas de la page

J'arrive à ce résultat à l'aide d'un javascript qui assigne au bloc "body" une hauteur en fonction de la taille de l'écran du visiteur. Serait-il possible d'obtenir la même chose uniquement en css3.

Merci

Bellumm

Invité · 25/09/2013, 12h02

Bonjour,
oui, c'est possible en CSS.

Fais une recherche sur : "sticky footer css".

**Candygirl** · 25/09/2013, 13h36

Hello,

Pour obtenir le comportement réel que tu décris (le sticky footer peut convenir selon le cas de figure), tu peux utiliser 2 méthodes:

Code html :

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

1
2
3
4
5
<body>
<div id="top">top</div>
<div id="content">content</div>
<div id="foot">foot</div>
</body>

Avec un positionnement absolu (IE7+):

Code :

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

1
2
3
4
5
html,body {height:100%;margin:0;padding:0;}
 
#top {height:5em;background:red;}
#content {position:absolute;width:100%;top:5em;bottom:4em;background:green}
#foot {position:absolute;width:100%;height:4em;bottom:0;background:blue}

Avec un display:table (IE8+):

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

1
2
3
4
5
6
html,body {height:100%;margin:0;padding:0;display:table;width:100%} div {display:table-row;} #top {height:5em;background:red;} #content {height:100%;background:green} #foot {height:4em;background:blue}

EDIT: en faite je crois me souvenir que IE a quelques soucis avec cette version mais je n'ai pas le temps de regarder plus en détail maintenant

**Bellumm** · 25/09/2013, 16h29

Merci beaucoup.

Ta première solution marche parfaitement.

Je testerai ce soir sur IE 7. Si cela ne fonctionne pas bien j'utiliserai un js sur les navigateurs archaïques.

Bellum

Diviser la page en trois blocs qui s'adaptent à l'écran [CSS 3]

CSS

Discussions similaires

Partager

Partager