nohayeye nohayeye - 8 months ago 67
CSS Question

100% height minus header?

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">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">

<div id="header">
<img src="./img/header_logo.png" alt="bla"/>
</div><!-- #header -->
<div id="nav">
</div><!-- #nav -->
<div id="content">
</div><!-- #content -->
<div class="clear">



html, body{
font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
margin: 0px;
padding: 0px;
border-width: 0px;

background: url(img/header_bg.png) repeat-x;
height: 65px;
padding-top: 20px;
padding-left: 25px;
width: 235px;
float: left;
background-color: #f7f7f7;
border-right: 1px solid #d9d9d9;
height: 100%;

float: left;
width: auto;
padding: 15px;

clear: both;

any ideas?

Answer Source

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: