CSS pour une interface HTML: Remplir la fenêtre du navigateur
Quand on utilise HTML 5 comme interface d'une application on veut ajuster exactement l'interface à la fenêtre du navigateur.
Au contraire, lorsqu'il s'agit d'une page web, si l'interface est fluide, sa largeur s'adapte à la largeur courante du navigateur, mais sa longueur peut dépasser celle de la fenêtre.
Dans le cas d'une application, le navigateur doit se confondre avec elle: ils ne font qu'un. Ainsi lorsque l'utilisateur agrandit la fenêtre navigateur, il le fait pour augmenter la surface de l'application, celle-ci doit donc s'adapter en largeur et en hauteur aux nouvelles dimensions du navigateur.
Une application comporte généralement des éléments de hauteur fixe tels que barre d'outil et autre composants, et des conteneurs dont les dimensions peuvent varier, il faut donc que ce soient ces derniers dont la taille change selon celle du navigateur tandis les autres restent inamovibles.
Cliquer sur l'image pour la démonstration
Dans notre exemple, les calques Panel gauche et Panel droit varient en largeur et en hauteur en fonction de la taille de la fenêtre. En-tête et Pied-de-page ont une position fixe et une hauteur fixe. Seule leur largeur s'adapte à celle de la fenêtre du navigateur.
On réalise ce genre d'interface avec une feuille de style spécialement étudiée et on vérifiera sur la démo que l'on peut changer la taille de la fenêtre à volonté, l'application occupe toujours toute la surface.
Le code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 Interface Demo </title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="header">En-tête</div>
<div id="inner">
<div id="lpane">Panel gauche</div>
<div id="rpane">Panel droit</div>
</div>
</div>
<div id="footer">Pied de page</div>
</div>
</body>
</html>
La balise container contient outer et footer. La balise outer contient header et inner. Le calque inner est divisé en deux panneaux adjacents. La largeur et la hauteur de ces deux panneau varie selon la taille de la fenêtre.
Le code CSS
div
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container
{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
padding-bottom:40px;
overflow:hidden;
}
#header
{
width:100%;
height:64px;
}
#outer
{
margin:0px auto;
width:100%;
height:100%;
}
#inner
{
margin:0px;
min-width:480px;
height:100%;
background:white;
padding:0 0 64px 0;
text-align:center;
}
#lpane, #rpane
{
display:inline-block;
width:49.5%;
height:100%;
margin:0px;
min-width:120px;
background:white;
overflow:hidden;
text-align:left;
}
#footer
{
height:40px;
}
La propriété box-sizing: border-box est appliquée à tous les calques du document. Elle permet d'éviter que les marges internes n'augmentent la taille des calques. Cela facile le contrôle des dimensions.
#container à la position absolute. C'est important car cela détermine le comportement de tous les calques internes.
#footer est inclut dans #container. Du fait que celui-ci ait un padding-bottom de 40 pixels, cela limite la hauteur du premier élément contenu (#outer) et laisse la place à ce second élément qui est toujours visible et en bas de page.
#header à une hauteur fixe et une largeur variable.
#outer et #inner subdivisent la page en hauteur, ce sont purement des calques d'agencement et ils n'ont pas de contenu propre.
#outer a une hauteur de 100%, mais il est décalé de 64 pixels par l'en-tête, aussi il chevauche le pied-de-page. Pour éviter cela, on lui attribue un padding inférieur de 64px.
#lpane et #rpane correspondent aux deux panels qui subdivisent le contenu. La largeur de 49.5% et le mode display: inline-block permettent de les aligner côte à côte. Attention, il suffit de modifier les marges pour perdre cet alignement. Ce sont des calques d'agencement aussi si on veut créer des marges, on les attribuera aux éléments qu'il contiennent. De même si on veut faire défiler leur contenu, on ajoutera un calque interne avec la propriété overflow:auto.
Licence de la démonstration et la feuille de style: Creative Common. Vous être libre d'utiliser la démo pour vos propres applications (pensez à enlever la balise meta robots) ou pour l'enseignement hors-ligne. Ne l'utilisez pas pour un tutoriel en ligne.