pied de hauteur variable en bas de page : LE RETOUR (display:table)

dabblet.css

/* pied de hauteur variable en bas de page : LE RETOUR (display:table)*/
html , body {display:table;height:100%;width:100%;margin:0;padding:0;text-align:center;}
header, section, footer {display:table-row;background:#159;color:white;height:100px;
border:solid;}
section {height:100%;background:#48a}
header:hover, footer:hover {height:150px;}
body > * > div {display:table-cell;vertical-align:middle;box-shadow:0 0 15px white;}

dabblet.html

<header><div><h1>titre</h1><p>contenu variable</p><div></header>
<section><div><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p><p>contenu variable</p>
<p>fin</p></div></section>
<footer><div><p>contenu variable</p></div></footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}