Manière moderne de baliser la disposition 100% de taille en HTML5 et CSS3
Je suis loin de baliser les sites depuis un certain temps. Nous avons donc maintenant HTML5 et de nombreuses nouvelles fonctionnalités en CSS. J'ai une mise en page de site commune avec en-tête et pied de page de taille fixe. Et bien sûr, le contenu principal entre les deux. Par défaut, la page doit occuper 100% de la hauteur de la fenêtre (la zone de contenu s’agrandit). Et si le contenu est long page barre de défilement verticale apparaît et tout comme d'habitude . Habituellement je le faisais par quelque chose comme ça:
<body>
<table id="main" ...>
<tr>
<td id="header-and-content">
<div id="header">contains logo, nav and has fixed height</div>
<div id="content">actual content</div>
</td>
</tr>
<tr>
<td id="footer">
fixed size footer
</td>
</tr>
</table>
</body>
Et css accompagnant:
html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }
Donc, c'est obsolète. Vous qui êtes au courant des nouvelles techniques de marquage, comment cela se fait-il maintenant en 2011?
UPD People, le problème ne concerne pas le balisage sémantique ni l'utilisation de divs. Je sais ce que cela signifie. Problème maintenant - comment dire au pied de page de rester en bas même lorsque le contenu est vide ou court. Lorsque le contenu est suffisamment long, il suffit de descendre comme dans le cas contraire. Absolu et fixe n'est pas la solution (du moins dans sa forme de base)
QUELQUES MISE À JOUR RÉSUMÉE
- J'ai essayé la méthode avec l'utilisation de display: table et display: table-row et cela fonctionne: peu de contenu , plus de contenu
- Méthode Assurez-vous que le pied de page colle au bas de la page a été conseillé par Andrej. Cela fonctionne aussi: peu de contenu , plus de contenu
Une certaine déception me semble cependant ressentie: la première méthode concerne uniquement les tables mais sans la balise table. Le second est vraiment vieux, j'ai évité de l'utiliser parce qu'il ressemble à du hack. Mon dieu, rien de nouveau :)
Tout d’abord, en 2011, nous n’utilisons plus les tableaux pour la mise en page!
Si j'étais vous, j'écrirais le balisage comme suit:
<body>
<div id="main" role="main">
<header>
contains logo, nav and has fixed height
</header>
<div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
actual content
</div>
<footer>
fixed size footer
</footer>
</div>
</body>
Et le CSS serait le même sauf les sélecteurs modifiés
html, body { height:100% }
#main { height:100% }
footer { height:123px }
Pour un pied de page fixe, je suggérerais d'utiliser position:absolute ou peut-être position:fixed - cela dépend de la façon dont vous voulez qu'il se comporte (faites défiler avec la page ou restez toujours en bas).
Pour faire un pied de page "collant", ce sera au bas de la page mais déplacez-vous avec le contenu, cette méthode fera l'affaire.
En 2013, il n'y a toujours rien qui bat une table décente qui a respectivement thead/tfoot/tbody.
Le texte ci-dessous (page HTML5 valide) est un en-tête et un pied de page fixes, une hauteur de 100% et PAS TOUT problème de redimensionnement.
<!DOCTYPE html>
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / nada CSS sizing trouble</title>
<style type="text/css">
html, body, table { height: 100% }
th { height: 80px }
#f { height: 40px }
table { width: 1000px }
html, body { margin: 0 }
table { margin: 0 auto }
td { text-align: left }
html, body { text-align: center } /* important for old browsers */
th { text-align: right }
html, body { background-color: rgb(148,0,211) }
#m { background-color: #f39 }
#m { -webkit-border-radius: 25px;
-khtml-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px; }
</style>
<table>
<thead><tr><th> head</th></tr></thead>
<tfoot><tr><td id="f">foot</td></tr></tfoot>
<tbody><tr><td id="m">main</td></tr></tbody>
</table>
Comme vous avez demandé "moderne" ... anno 2016, j'ai peut-être une meilleure réponse qu'en 2013:
utilisez la solution 100vh en CSS3. vh est une nouvelle unité et correspond à la hauteur de ViewPort.
html, body { height: 100% }
header { height: 100px }
footer { height: 50px }
main { height: calc(100vh - 150px); }
html, body { width: 100% }
header, main, footer { width: 1000px }
html, body { margin: 0 }
header, main, footer { margin: 0 auto }
html, body { padding: 0 }
html, body { text-align: center }
body { background-color: white }
header { background-color: yellow }
main { background-color: orange }
footer { background-color: red }<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>Mais si vous souhaitez être compatible avec les anciens navigateurs, utilisez le code de ma réponse de 2013.
Techniquement, vous pouvez probablement toujours mettre en page votre page avec des balises de tableau, mais cela est maintenant considéré comme une mauvaise pratique. Il est considéré comme une bonne pratique d'utiliser un balisage Web "sémantique", ce qui signifie d'utiliser des balises aux fins auxquelles ils sont destinés. Par conséquent, une balise de table devrait être utilisée pour représenter les données de table et non une conception invisible. Les DIV sont destinées à être utilisées pour concevoir votre mise en page invisible. Une liste à part est une excellente ressource de site Web pour comprendre ces concepts.
Cet article est utile pour comprendre le balisage sémantique: http://www.alistapart.com/articles/12lessonsCSSandstandards
Donc, tout cela étant dit, voici un exemple de page qui fait ce que vous voulez:
Comme demander "moderne" ET "compatible" est une contraction de toute façon, la méthode de la grille n'a pas encore été mentionnée, et est peut-être trop moderne pour l'instant, mais avec certaines adaptations pourrait être une solution.
Cet article (et les pointeurs) -avec une utilisation plus complexe- est intéressant à lire: https://developers.google.com/web/updates/2017/01/css-grid
Maintenant, le code a l'air sympa, mais les navigateurs ne le font pas ... - alors j'ai ajouté un forçage.
https://jsfiddle.net/qLcjg6L6/1/
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
min-height: 100vh;
margin: 0;
padding: 0 }
body { display: grid;
grid-template-rows: minmax(auto, min-content) auto minmax(auto, min-content);
grid-template-columns: 100% }
header { background: red }
main { background: pink }
footer { background: purple }
/* as this code is yet far from well-supported, here's a brute force... */
header { height: 70px }
footer { height: 60px }
main { height: calc(100vh - 130px); }
/* 130px being the sum of header/footer - adapt to your desired size/unit */
</style>
</head>
<body>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</body>
</html>
Aujourd'hui, vous feriez comme ça (pas vraiment très différent)
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
et
<html><body><div></div></body></html>
Jusqu'à présent, personne n'a mentionné la méthode de la boîte flexible
https://jsfiddle.net/55r7n9or/
<!DOCTYPE html>
<html>
<head>
<style>
html, body, div {
height: 100%;
margin: 0;
padding: 0 }
div { display: flex;
flex-direction: column }
main { flex: 1 }
header { background: red }
main { background: pink }
footer { background: purple }
</style>
</head>
<body>
<div>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</div>
</body>
</html>
Permettez-moi d'ajouter ma contribution en ajoutant 3 colonnes à votre mise en page d'en-tête/main/pied de page:
<!DOCTYPE html>
<table>
<thead>
<tr id="header">
<th colspan="3">head</th>
</tr>
</thead>
<tbody>
<tr>
<td id="left">main</td>
<td id="main">main</td>
<td id="right">main</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="footer" colspan="3">foot</td>
</tr>
</tfoot>
</table>