CSS Layout How to - Create Full height layouts

Question

We would like to know how to create Full height layouts.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.row, .col {<!--from ww w  .jav a 2s.  com-->
  overflow: hidden;
  position: absolute;
}
.row {
  left: 0;
  right: 0;
}

.col {
  top: 0;
  bottom: 0;
}

.scroll-x {
  overflow-x: auto;
}

.scroll-y {
  overflow-y: auto;
}

.left.col {
  width: 250px;
  background: #EEE;
}

.right.col {
  left: 250px;
  right: 0;
  background: #DDD;
}

.header.row {
  height: 75px;
  line-height: 75px;
  background: #AAA;
}

.body.row {
  top: 75px;
  bottom: 50px;
  background: #BBB;
}

.footer.row {
  height: 50px;
  bottom: 0;
  line-height: 50px;
  background: #CCC;
}
</style>
</head>
<body>
  <div class="left col">Left pane</div>
  <div class="right col">
    <div class="header row">View or edit something</div>
    <div class="body row scroll-y">
      <p>horizontally-scrollable</p>
      <div class="scroll-x">
        <div style="width: 1000px; height: 100px; background: white">
          content
        </div>
      </div>
      <p>paragraph.</p>
    </div>
    <div class="footer row">Some status message here</div>
  </div>
</body>
</html>

The code above is rendered as follows: