Page Widget How to - Layout with 100% height sidebar

Question

We would like to know how to layout with 100% height sidebar.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#wrap {<!--from   w  ww .j  a  v  a2  s.  c o  m-->
  position: relative;
  background: #DDD;
  padding-left: 200px;
}

aside {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background: #777;
}

header {
  height: 60px;
  background: #ccc;
}

section {
  height: 900px;
  background: #0bd;
}

footer {
  height: 60px;
  background: #000;
  color: #FFF;
}
</style>
</head>
<body>
  <div id="wrap">
    <aside>Aside content</aside>
    <header>Header content</header>
    <section>Section content</section>
  </div>
  <footer>Footer content</footer>
</body>
</html>

The code above is rendered as follows: