Je travaille sur une application Web où je souhaite que le contenu occupe toute la hauteur de l'écran.
La page comporte un en-tête, qui contient un logo et des informations sur le compte. Cet en-tête peut avoir une hauteur arbitraire. Je veux que la division de contenu remplisse le reste de la page jusqu'au bas.
J'ai une div
d'en-tête et une div
de contenu. Pour l'instant, j'utilise un tableau pour la mise en page, comme suit :
CSS et HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
La hauteur totale de la page est remplie, et aucun défilement n'est nécessaire.
Pour tout ce qui se trouve à l'intérieur de la div de contenu, définir top : 0;
le placera juste en dessous de l'en-tête. Parfois, le contenu sera un véritable tableau, dont la hauteur sera fixée à 100 %. Si vous placez header
à l'intérieur de content
, cela ne fonctionnera pas.
Existe-t-il un moyen d'obtenir le même effet sans utiliser le table
?
Mise à jour:
Les éléments à l'intérieur de la div
de contenu auront également des hauteurs définies en pourcentage. Ainsi, un élément à 100% à l'intérieur de la div
la remplira jusqu'en bas. Tout comme deux éléments à 50%.
Mise à jour 2:
Par exemple, si l'en-tête occupe 20% de la hauteur de l'écran, un tableau spécifié à 50% à l'intérieur de #content
occupera 40% de l'espace de l'écran. Jusqu'à présent, la seule chose qui fonctionne est d'envelopper le tout dans un tableau.
Il n'existe pas vraiment de méthode saine et compatible avec tous les navigateurs pour effectuer cette opération en CSS. Si votre mise en page est complexe, vous devez utiliser JavaScript pour définir la hauteur de l'élément. L'essentiel de ce que vous devez faire est le suivant :
Element Height = Viewport height - element.offset.top - desired bottom margin
Une fois que vous avez obtenu cette valeur et défini la hauteur de l'élément, vous devez attacher des gestionnaires d'événements à la fois à la fenêtre onload et à la fenêtre onresize afin de pouvoir lancer votre fonction de redimensionnement.
De plus, en supposant que votre contenu puisse être plus grand que la fenêtre d'affichage, vous devrez définir overflow-y sur scroll.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
Dans tous les navigateurs sains d'esprit, vous pouvez placer le div "header" avant le contenu, comme un frère, et la même CSS fonctionnera. Cependant, IE7- n'interprète pas correctement la hauteur si le flottant est de 100 % dans ce cas, l'en-tête doit donc être DANS le contenu, comme ci-dessus. L'option overflow : auto entraînera l'apparition de doubles barres de défilement dans IE (où la barre de défilement est toujours visible, mais désactivée), mais sans cette option, le contenu sera coupé s'il déborde.
Si le seul problème est la hauteur, l'utilisation de divs semble fonctionner :
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
Dans un test simple, la largeur de l'en-tête/contenu est différente dans votre exemple et le mien, mais je ne suis pas sûr, d'après votre message, que la largeur vous préoccupe ?