footer all the way down , simply from IE8 and young browsers : Gcyrillus

dabblet.css

/* footer all the way down , simply from IE8 and young browsers : Gcyrillus  */
html  {																									background: #f06;background: linear-gradient(90deg, #f06, yellow);padding:0;
/* ! */		height: 100%;
}
body {
/* ! */		display:table;
/* ! */		height:100%; 			/* en fait c'est un min-height */																										width:60%;box-shadow:0 0 15px ;border-spacing:0;margin:0 auto;background: linear-gradient(-150deg, #f06, yellow);
}
header,section,footer {
/* ! */		display:table-row;}
header, footer  {					/* height:auto; *//* implicite */														background:#333;color:white;}
section {
/* ! */		height:100%;			/* utilise tout l'espace vertical que header et footer n'utilisent pas */
}















</style>
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>

dabblet.html

<!--[if lte IE 7]><style>body, header,section,footer {display:block;}footer {height:8em;}section {margin-bottom:8em;}body {position:relative; min-height:100%; height:auto!important; height:100%;}footer {position:absolute;bottom:0;width:100%;left:0;}</style><![endif]-->
<header><h1>HTML Ipsum Presents</h1></header>
<section><p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p><h2>Header Level 2</h2><ol><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li></ol><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote></section>
<footer><h3>Header Level 3</h3><ul>   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li></ul></footer>

dabblet.js

// alert('Hello world!');

settings.json

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