jonjaques/app.html

## app.html
<!doctype html>
<html lang="en">
<head>
    <title>Test</title>
    <link rel="stylesheet/less" type="text/css" href="app.less">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.0/less-1.3.0.min.js" type="text/javascript"></script>
</head>

<body>
    <header id="appHeader">Header here</header>
    <div id="appContainer">
        <div class="push">

            <nav id="appNav">Nav</nav>
            <section id="appContent">
                Content Here
            </section>

        </div>
    </div>
</body>
</html>

## app.less
// ----------
//  Mixins
// ----------

.fixed-header(@height) {
  height: @height;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.fixed-header-push(@height) {
  margin-top: @height;
}

.fixed-container {
  min-height: 100%;
  overflow: hidden;
  zoom: 1;

  &:before, &:after {
    content: "";
    display: table;
    zoom: 1;
  }

  &:after {
    clear: both;
  }
}

.fixed-pane(@width) {
  float: left;
  height: 100%;
  margin: 0 0 -99999em;
  min-height: 100%;
  padding: 0 0 99999em;
  width: @width;
}

.liquid-pane {
  height: 100%;
  margin: 0 0 -99999em;
  min-height: 100%;
  padding: 0 0 99999em;
  overflow: hidden;
}

// ------------------
//  Application Vars
// ------------------

@app-header-height: 50px;
@app-sidebar-width: 100px;

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

html {
  overflow-y: scroll;
}

body {
  margin: 0;
}

#appHeader {
  .fixed-header(@app-header-height);
}

#appContainer {
  .fixed-container;

  // Unfortunately this is needed
  // to compensate for the header.
  .push {
    .fixed-header-push(@app-header-height);
  }
}

#appNav {
  background: #0f0;
  .fixed-pane(@app-sidebar-width);
}
#appContent {
  background: #00f;
  .liquid-pane;
}
	<!doctype html>
	<html lang="en">
	<head>
	<title>Test</title>
	<link rel="stylesheet/less" type="text/css" href="app.less">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.0/less-1.3.0.min.js" type="text/javascript"></script>
	</head>

	<body>
	<header id="appHeader">Header here</header>
	<div id="appContainer">
	<div class="push">

	<nav id="appNav">Nav</nav>
	<section id="appContent">
	Content Here
	</section>

	</div>
	</div>
	</body>
	</html>
	// ----------
	// Mixins
	// ----------

	.fixed-header(@height) {
	height: @height;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	}

	.fixed-header-push(@height) {
	margin-top: @height;
	}

	.fixed-container {
	min-height: 100%;
	overflow: hidden;
	zoom: 1;

	&:before, &:after {
	content: "";
	display: table;
	zoom: 1;
	}

	&:after {
	clear: both;
	}
	}

	.fixed-pane(@width) {
	float: left;
	height: 100%;
	margin: 0 0 -99999em;
	min-height: 100%;
	padding: 0 0 99999em;
	width: @width;
	}

	.liquid-pane {
	height: 100%;
	margin: 0 0 -99999em;
	min-height: 100%;
	padding: 0 0 99999em;
	overflow: hidden;
	}

	// ------------------
	// Application Vars
	// ------------------

	@app-header-height: 50px;
	@app-sidebar-width: 100px;

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

	html {
	overflow-y: scroll;
	}

	body {
	margin: 0;
	}

	#appHeader {
	.fixed-header(@app-header-height);
	}

	#appContainer {
	.fixed-container;

	// Unfortunately this is needed
	// to compensate for the header.
	.push {
	.fixed-header-push(@app-header-height);
	}
	}

	#appNav {
	background: #0f0;
	.fixed-pane(@app-sidebar-width);
	}
	#appContent {
	background: #00f;
	.liquid-pane;
	}