Untitled

dabblet.css

html,body {
	min-height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
}

header {
	display: flex;
	min-height: 70px;
	background: green;
}

main {
	display: flex;
	flex: 1 100%;
}

.a {
	background: blue;
	width: 250px;
	padding: 10px 20px;
	display: flex;
	flex-direction: column;
}

.a > ul {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	background: darkblue;
}

.b {
	background: red;
	width: 100%;
}

footer {
	display: flex;
	background: orange;
	min-height: 38px;
}

dabblet.html

<header>header</header>
<main>
	<div class="a">
		<h1>aside</h1>
		<ul>
			<li>Point 1
			<li>Point 2
				<ul>
					<li>SubPoint 1
					<li>SubPoint 2
					<li>SubPoint 3
					<li>SubPoint 4
					<li>SubPoint 5
					<li>SubPoint 6
					<li>SubPoint 7
					<li>SubPoint 8
					<li>SubPoint 9
				</ul>
			<li>Point 3
			<li>Point 4
			<li>Point 5
		</ul>
	</div>
    <div class="b">MAP</div>
</main>
<footer>footer</footer>

dabblet.js

// alert('Hello world!');

settings.json

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