100% height minus header?
HtmlCssHtml Problem Overview
I want to create a layout for an admin panel, but I dont know how to get the #nav and #content container always at 100% of the browser window. I don't understand the inherit of 100% height attributes, could someone explain it more clearly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index.htm</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="header">
<img src="./img/header_logo.png" alt="bla"/>
</div><!-- #header -->
<div id="nav">
</div><!-- #nav -->
<div id="content">
asfdg
</div><!-- #content -->
<div class="clear">
</div>
</body>
</html>
main.css
html, body{
font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
}
img{
margin: 0px;
padding: 0px;
border-width: 0px;
}
#wrapper{
}
#header{
background: url(img/header_bg.png) repeat-x;
height: 65px;
padding-top: 20px;
padding-left: 25px;
}
#nav{
width: 235px;
float: left;
background-color: #f7f7f7;
border-right: 1px solid #d9d9d9;
height: 100%;
}
#content{
float: left;
width: auto;
padding: 15px;
}
.clear{
clear: both;
}
any ideas?
Html Solutions
Solution 1 - Html
If your browser supports CSS3, try using the CSS element Calc()
height: calc(100% - 65px);
you might also want to adding browser compatibility options:
height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */
also make sure you have spaces between values, see: https://stackoverflow.com/a/16291105/427622
Solution 2 - Html
As mentioned in the comments height:100% relies on the height of the parent container being explicitly defined. One way to achieve what you want is to use absolute/relative positioning, and specifying the left/right/top/bottom properties to "stretch" the content out to fill the available space. I have implemented what I gather you want to achieve in jsfiddle. Try resizing the Result window and you will see the content resizes automatically.
The limitation of this approach in your case is that you have to specify an explicit margin-top on the parent container to offset its contents down to make room for the header content. You can make it dynamic if you throw in javascript though.
Solution 3 - Html
For "100% of the browser window", if you mean this literally, you should use fixed positioning. The top, bottom, right, and left properties are then used to offset the divs edges from the respective edges of the viewport:
#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}
This will set up a screen with the left 235 pixels devoted to the nav, and the right rest of the screen to content.
Note, however, you won't be able to scroll the whole screen at once. Though you can set it to scroll either pane individually, by applying overflow:auto to either div.
Note also: fixed positioning is not supported in IE6 or earlier.