Bonjour,
lowkey a écrit :
le site n'est jamais plus grand qu'un écran
Cent balles que si.
lowkey a écrit :
Mon probleme est que je voudrais que mon div body prenne la hauteur complete entre mon header et mon footer pour pouvoir faire des vertical-align.
Ça veut dire quoi «pour pouvoir faire des vertical-align»? Tu veux que div#body prenne toute la hauteur de la zone de visualisation du navigateur en partant de 107px depuis le haut et jusqu'à 15px vers le bas? C'est possible en utilisant le positionnement absolu (mais pas compatible IE6, par contre), avec
top: 107px; bottom: 15px;. Possible, mais pas des masses conseillé (vu que dans certains cas les pages ne tiendront pas dans l'espace ainsi dessiné par div#body.
Ce que je ferais plutôt:
1. Obtenir un centrage vertical de l'ensemble du contenu en passant par un tableau à une cellule pour la compatibilité IE. Cf.
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html
2. Positionner le td global en relatif, et positionner l'en-tête et le pied de page en absolu...
... ah ben non, ça n'a pas l'air de marcher. Le positionnement fixe marche, bien entendu, mais apparemment l'utilisation du td comme référent pour le positionnement absolu ne fonctionne pas bien.
Bon ben je sais pas trop comment faire.
Une exemple qui marche à peu près avec le positionnement fixe (que je ne recommande pas particulièrement, d'ailleurs):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Un bloc centré horizontalement et verticalement dans la page</title>
<style type="text/css" media="screen">
/* BASE POUR CENTRAGE VERTICAL */
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#page-table {
height: 100%;
width: 100%;
border-collapse: collapse;
text-align: center;
}
#page-td {
height: 100%;
padding: 0;
vertical-align: middle;
}
/* POSITIONNEMENT DES PRINCIPAUX BLOCS */
div#header, div#footer {
position: fixed;
left: 10%;
width: 80%;
background: yellow;
}
div#header {
top: 0;
height: 110px;
}
div#footer {
bottom: 0;
height: 30px;
}
div#body {
margin: 120px 10% 40px 10%;
padding: 100px;
background: blue;
text-align: left;
}
</style>
</head>
<body>
<table id="page-table"><tbody><tr><td id="page-td">
<div id="header">En-tête</div>
<div id="body"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p></div>
<div id="footer">Pied de page</div>
</td></tr></tbody></table>
</body>
</html>
