Bonjour,
Je cherchais à faire une mise en page assez simple sur le principe mais pas si évidente à retranscrire en CSS :
- un entête
- un contenu à plusieurs colonnes (par exemple une sidebar et un bloc principal) de même hauteur
- un pied de page
Le tout devant occuper la totalité de la hauteur du viewport (pied de page en bas de page systématiquement avec colonnes qui couvrent toute la hauteur systématiquement) et s'allonger avec lui.
Malgré le côté basique de cette mise en page, j'ai pas mal galéré pour arriver à mes fins. Bon, je redécouvre peut-être l'eau chaude, peut-être que cette méthode est ultra-connue de tout le monde mais j'ai eu du mal à trouver des infos complètes, y-compris dans les tutos ici-même (qui m'ont néanmoins bien aidé).
J'utilise les propriétés tabulaires de display pour obtenir ce que je voulais. Le résultat a l'air fonctionnel sur Firefox et Chrome. Pas testé sur IE, Safari ou Opera.
Le code avec les CSS intégrés (avec de belles couleurs fluo pour bien visualiser le résultat) :
Le wrapper (body) peut utiliser une image de fond qui couvrira bien la hauteur totale si le contenu est plus long que la hauteur du viewport.
Le site (id page) a une largeur fixe, ici 1000px pour l'exemple.
On peut rajouter des colonnes (classe column) dans la zone du contenu (id content). Il est préférable de fixer la largeur de chacune pour ne pas avoir de surprises (afin qu'elles couvrent bien la largeur définie pour le site).
Si vous avez des retours, je suis preneur.
Je cherchais à faire une mise en page assez simple sur le principe mais pas si évidente à retranscrire en CSS :
- un entête
- un contenu à plusieurs colonnes (par exemple une sidebar et un bloc principal) de même hauteur
- un pied de page
Le tout devant occuper la totalité de la hauteur du viewport (pied de page en bas de page systématiquement avec colonnes qui couvrent toute la hauteur systématiquement) et s'allonger avec lui.
Malgré le côté basique de cette mise en page, j'ai pas mal galéré pour arriver à mes fins. Bon, je redécouvre peut-être l'eau chaude, peut-être que cette méthode est ultra-connue de tout le monde mais j'ai eu du mal à trouver des infos complètes, y-compris dans les tutos ici-même (qui m'ont néanmoins bien aidé).
J'utilise les propriétés tabulaires de display pour obtenir ce que je voulais. Le résultat a l'air fonctionnel sur Firefox et Chrome. Pas testé sur IE, Safari ou Opera.
Le code avec les CSS intégrés (avec de belles couleurs fluo pour bien visualiser le résultat) :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
background-color: #eee;
height: 100%;
}
#wrapper{
background-color: #00f;
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#page{
background-color: #0ff;
width: 1000px;
height: 100%;
margin: 0 auto;
display: table;
}
#header{
background-color: #0f0;
height: 4em;
display: table-row;
text-align: left;
}
#content{
display: table;
height: 100%;
text-align: left;
}
.column{
display: table-cell;
}
#sidebar{
background-color: #f00;
width: 200px;
}
#main{
background-color: #ff0;
width: 800px;
}
#footer{
background-color: #0f0;
text-align: center;
height: 2em;
display: table-row;
}
</style>
</head>
<body id="wrapper">
<div id="page">
<div id="header">Entête</div>
<div id="content">
<div id="sidebar" class="column"><p>Colonne</p></div>
<div id="main" class="column">
<p>Contenu</p>
</div>
</div>
<div id="footer">Pied de page</div>
</div>
</body>
</html>Le wrapper (body) peut utiliser une image de fond qui couvrira bien la hauteur totale si le contenu est plus long que la hauteur du viewport.
Le site (id page) a une largeur fixe, ici 1000px pour l'exemple.
On peut rajouter des colonnes (classe column) dans la zone du contenu (id content). Il est préférable de fixer la largeur de chacune pour ne pas avoir de surprises (afin qu'elles couvrent bien la largeur définie pour le site).
Si vous avez des retours, je suis preneur.