Creating a help system using Bootstrap. The goal is to have the left navigation fill the vertical space, regardless of the size of the menu or content.
In addition, the footer should remain at the bottom of the page when there is minimal content but should be pushed down when the content exceeds the height of the viewport.
Check out this JSFiddle demo for reference.
The layout structure includes:
<html>
<head></head>
<body>
<header></header>
<div id="system"></div> <!-- Bar above nav and content showing breadcrumbs -->
<main id="content">
<div class="row">
<section></section> <!-- Topic content section -->
<aside></aside> <!-- Left navigation (floated left) /
Needs to fill vertical space above and below it -->
</div>
</main>
<footer></footer> <!-- Should stick to bottom of page with little content,
but can be pushed by longer content -->
</body>
</html>