Skip to content

Instantly share code, notes, and snippets.

@bignimbus

bignimbus/layout.html

Last active March 29, 2016 19:29
Show Gist options
  • Save bignimbus/bb9e4bfdc2e8aaf92758ed555758f000 to your computer and use it in GitHub Desktop.
Save bignimbus/bb9e4bfdc2e8aaf92758ed555758f000 to your computer and use it in GitHub Desktop.
Download ZIP
Using calc + vh to elegantly enforce 100% content area height
Raw
layout.html
<body>
<section class="header">
<h1>My Page</h1>
</section>
<article class="content">
<h2>The things I am putting on the internet</h2>
<p>Jack swab salmagundi Brethren of the Coast knave line plunder belaying pin Admiral of the Black boom. Sloop pink holystone yard pillage tender no prey, no pay Pirate Round chandler bilge water. Transom careen rum keelhaul lanyard man-of-war rope's end grog pinnace bucko.</p>
<p>Bilged on her anchor chase Jolly Roger coffer jury mast rum grapple interloper hearties keel. Avast chantey Jolly Roger fathom scallywag matey Spanish Main booty Corsair Plate Fleet. Fluke Buccaneer cog yo-ho-ho spirits loaded to the gunwalls pillage gunwalls gally holystone.</p>
<p>League stern maroon quarter fore jack grog blossom American Main clipper pressgang. Ho tack landlubber or just lubber run a shot across the bow grapple boom cutlass long clothes hands reef. Jack Tar Buccaneer Sail ho aye spyglass run a rig Brethren of the Coast carouser parrel landlubber or just lubber.</p>
</article>
<footer>
&copy; Pirates 2016
</footer>
</body>
Raw
style.css
body > * {
box-sizing: border-box;
}
.header {
height: 50px;
}
footer {
height: 30px;
}
.content {
height: calc(100vh - 50px - 30px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment