Vertical fill remaining area with flexbox.

dabblet.css

/**
 * Vertical fill remaining area with flexbox.
 */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
.top {
	overlay: hidden;
	background: blue;
}
.content {
	background: red;
	flex: 1;
	position: relative;
}
.inner {
	background: gray;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
}

dabblet.html

<div class="top">
	<h1>Title</h1>
</div>
<div class="content">
	<div class="inner">
	content
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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