Stycky Footer

dabblet.css

/**
 * Stycky Footer
 */
/* code below of this comment does all work.
try to play with deleting one of this two characters → */
* {
	margin:0;
	padding:0;
}
html,
body,
#wrap {
	height: 100%;
}
body > #wrap {
	height: auto;
	min-height: 100%;
}
#main {
	padding-bottom: 50px;
}
#footer {
	position: relative;
	margin-top: -50px;
	height: 50px;
	clear:both;
}
/* code below is just for visualization */
html {
	font-family: sans-serif;
}
p,
menu {
	padding: 1em;
}
menu a:after {
	content: ' |';
	color: hsl(0, 0%, 50%);
}
menu a:last-of-type:after {
	content: '';
}
menu #tip {
	float: right;
	color: hsl(100, 50%, 20%);
	border-bottom: 1px dashed;
	position: relative;
	margin-right: 1em;
}
menu #tip:after {
	content: ' ↓';
	display: block;
	position: absolute;
	right: -1em;
	top: 0;
}
#footer {
	background: hsl(200, 75%, 80%);
}

dabblet.html

<div id="wrap">
	<div id="main" class="clearfix">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut imperdiet risus. Vestibulum quis leo sit amet nisl placerat tempus ac sed purus. Aliquam vel lectus ligula, id placerat ipsum. Donec sed justo dui, in ullamcorper lacus. Proin eget vulputate ligula. Vestibulum lacinia malesuada tincidunt. Vestibulum pretium tortor dui. Sed tellus risus, aliquet eu feugiat in, egestas id tellus. Pellentesque quis lectus ut lectus facilisis placerat eget in nisl. Morbi congue quam eget libero euismod et tempor risus fringilla.</p>
		<p>Quisque consequat, sem id porta hendrerit, diam arcu ultricies mauris, ut blandit nibh est quis sem. Fusce varius, elit porttitor imperdiet ornare, nulla ante tristique velit, eu vulputate mi justo eget justo. Nullam justo velit, cursus a suscipit et, vestibulum sagittis purus. Ut lorem leo, blandit ornare adipiscing ac, pellentesque eu dolor. Sed nec lacus congue dui tristique fermentum. Aenean enim diam, pellentesque nec hendrerit vitae, pulvinar quis purus. Pellentesque lorem sapien, molestie ut pulvinar non, hendrerit at sapien. Curabitur diam est, aliquam sit amet bibendum vel, tempor ac leo. Vestibulum gravida enim et diam venenatis eu porttitor quam posuere. Proin quis semper elit. Donec elementum eleifend justo. Nulla scelerisque consequat quam at placerat. Morbi a libero et justo tristique dictum molestie et enim. Integer viverra pharetra nunc quis interdum.</p>
		<p>Nullam nec malesuada neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque dignissim nunc vel lectus dignissim laoreet. Nunc quam risus, facilisis a pharetra vel, ornare non felis. Nullam accumsan iaculis nunc, a dictum est elementum aliquam. Phasellus ante nibh, adipiscing vulputate lobortis placerat, condimentum tristique enim. Etiam nec lacus et nisl aliquam scelerisque. In hac habitasse platea dictumst. Sed massa diam, tempor eu laoreet eleifend, varius rhoncus orci.</p>
	</div>
</div>
<div id="footer">
	<menu>
		<a>About</a>
		<a>Contact</a>
		<a>Help</a>
		<a>Copyright</a>
		<a>Blog</a>
		<span id="tip">Resize window vertically</span>
	</menu>
</div>

settings.json

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