100% height

by rwone

HTML

<div id="header">
</div>
<div id="menu">
  <ul id="main_menu">
    <li><a href="/">one</a></li><li><a href="/two.html">two</a></li><li><a href="/three.html">three</a></li><li><a href="/four.html">four</a></li><li><a href="/five.html">five</a></li>
  </ul>
</div>
<div id="container">
  <div id="left_col">

  </div>
  <div id="main_content">

  </div>
  <div id="right_col">

  </div>
</div>
<div id="footer">

</div>

CSS

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  display:table;
  width:100%;
  height:100%;
}

#header {
  background: #0099cc none repeat scroll 0 0;
  height: 135px;
  width: 100%;
  position: relative;
}

#left_col {
  background: orange none repeat scroll 0 0;
  display: table-cell;
  width: 15%;
}

#main_content {
  background: yellow none repeat scroll 0 0;
  display: table-cell;
}

#right_col {
  background: green none repeat scroll 0 0;
  display: table-cell;
  width: 15%;
}

#footer {
background: #3a3a3a;
  height: 200px;
  position: absolute;
  width: 100%;
  bottom:0;
}

ul#main_menu {
  margin: 0;
  padding: 0;
  text-align: center;
}

#main_menu li {
  border-right: 1px solid #555;
  display: inline-block;
  margin-right: 0;
  width: 20%;
}

#main_menu li a {
  color: #fff;
  display: block;
  font-family: arial;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 24px;
  padding: 5px 0;
  text-decoration: none;
}

#menu { 
border-bottom: 1px solid #555;
border-top: 1px solid #555;
background-color: #999999; 
}