Untitled

dabblet.css

/*gab by gcyrillus, oldish framelike  */
html {height:100%;background:#333;}
  header,  footer , body > section > article , p{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
margin:0;
border-radius:15px/45px 5px ;
}
body {height:100%; width:1200px; margin:auto;position:relative;text-align:center;}
body >header, body >footer, body > section{
padding:5px;
height:100px;
position:absolute;
left:0;right:0;}
header {top:0;}
body >footer {bottom:0;height:50px;}

body > section {top:0;bottom:0px;box-sizing:border-box;padding:110px 0 60px;height:100%;}

body > section > article {
text-align:left;
display:inline-block;
vertical-align:top;
width:33%;
overflow:auto;
height:100%;
box-shadow:0 0 5px #555;
}
footer,header, p {padding:2px 5px;}
footer, header {box-shadow:0 0 5px #555;}
body >header {z-index:1;}

dabblet.html

<header>
<h1>titre entete</h1>
<p>autre contenu, type block</p>
</header>
<section>
<article>
<header>header</header>
<p> contenu <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>
<footer>pied</footer>
</article>
<article>
<header>header</header>
<p> contenu <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>
<footer>pied</footer>
</article>
<article>
<header>header</header>
<p> contenu <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>
<footer>pied</footer>
</article>
</section>
<footer>pied de page</footer>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}