Skip to content

Instantly share code, notes, and snippets.

@surfjedi

surfjedi/css-calc.html

Created June 17, 2014 03:23
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save surfjedi/a6d94870ecf260e9fa2e to your computer and use it in GitHub Desktop.
Save surfjedi/a6d94870ecf260e9fa2e to your computer and use it in GitHub Desktop.
Download ZIP
Fixed height header and footer with percentage middle section filling - css calc() example
Raw
css-calc.html
<html>
<head>
<style>
html, body {
height: 100%;
overflow: hidden;
}
#top {
background: red;
height: 40px;
}
#mid{
background: green;
height: calc(100% - 80px);
overflow: hidden;
}
#bottom {
background: blue;
height: 40px;
}
p {
padding: 20px;
}
section {
margin: 10px 10px 10px;
overflow: scroll;
height: calc(100% - 30px);
border: red solid 1px;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="mid">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam earum at minus molestias voluptatem perferendis quo, excepturi, impedit reiciendis? Odio earum tempore, omnis magni commodi veniam reprehenderit sint voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam earum at minus molestias voluptatem perferendis quo, excepturi, impedit reiciendis? Odio earum tempore, omnis magni commodi veniam reprehenderit sint voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam earum at minus molestias voluptatem perferendis quo, excepturi, impedit reiciendis? Odio earum tempore, omnis magni commodi veniam reprehenderit sint voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam earum at minus molestias voluptatem perferendis quo, excepturi, impedit reiciendis? Odio earum tempore, omnis magni commodi veniam reprehenderit sint voluptate?</p>
</section>
</div>
<div id="bottom">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment