I'm trying to create a layout where the header height can vary, but the footer has a fixed height. I want the left nav and content sections to fill the screen height, with the left nav having a fixed width and the content taking up the remainder.
Is there a way to achieve this using just HTML and CSS, without any JavaScript?
You can see an example here: JSFiddle example (Full code provided below)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
html, body{
overflow: hidden;
width: 100%;
height: 100%;
}
p {
line-height:1em;
}
ul {
margin-left : 2em;
list-style: none;
}
header {
width: 100%;
background-color:red;
border-bottom-width: 0.25em;
border-bottom-color: blue;
border-bottom-style: solid;
}
nav {
position:absolute;
width: 15em;
top:0;
left:0;
bottom:3.25em;
background-color:gray;
overflow:auto;
}
section {
position:absolute;
top:0;
left:15em;
bottom:3.25em;
right:0;
padding:0.25em;
background-color:yellow;
border-left-width: 0.25em;
border-left-color: blue;
border-left-style: solid;
overflow:auto;
}
footer {
position:absolute;
bottom:0;
width: 100%;
height: 3.25em;
text-align:center;
background-color:green;
}
</style>
</head>
<body>
<header>
<img src="http://www.luzchem.com/images/up1.jpg" style="vertical-align: top;" />
<p>Menu and Search</p>
</header>
<div style="position:relative; height:100%;">
<nav>
<ul>
<li><a href="#">Line 1</a>
</li>
<li><a href="#">Line 2</a>
</li>
<li><a href="#">Line 3</a>
</li>
</ul>
</nav>
<section>
<p>Body</p>
</section>
<footer>
<p>5509 Canotek RD, Unit 12, Ottawa Ontario, Canada, K1J9J9
<br />Phone: (613) 749-2442 Fax: (613) 749-2393 Toll Free: (800) 397-0977
<br /><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f2e0ede4f2c1edf4fbe2e9e4ecafe2eeec">[email protected]</a>?subject=General%20Inquiry&body=What%20do%20you%20want%20today%3F"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4033212c2533002c353a2328252d6e232f2d">[email protected]</a></a>
</p>
<div style="position:relative; bottom:0;"> <span style="text-align:right; float:right; margin-right:1em;">Copyright © 2012 Luzchem Research Inc.</span>
<div style="text-align:left; float:left; margin-left:1em;"> <a href="company_info.php">Company Info</a>
<a href="">Link_2</a>
<a href="">Link_3</a>
</div>
</div>
</footer>
</div>
</body>
</html>