Skip to content

Instantly share code, notes, and snippets.

@jonjaques
Created May 13, 2012 03:02
Show Gist options
  • Save jonjaques/2672781 to your computer and use it in GitHub Desktop.
Save jonjaques/2672781 to your computer and use it in GitHub Desktop.
Less version for reusability and (slightly) more semantic HTML. Full-height 2-column fixed-width plus fluid with header.
<!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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment