Vertical layout with middle box scrollable position:absolute

<!DOCTYPE html>
<html>
<head>
<title> http://stackoverflow.com/questions/16168449/vertical-layout-with-middle-box-scrollable-not-positionabsolute </title>

<style type="text/css">

html,body {
  height: 100%;
  width: 100%;
  overflow:hidden;
  background-color:#fcc;
}

div {
  border:1px solid blue;
}

.content {
  position:relative;
  height: 90%;
  width: 90%;
  background-color:#ccf;
  border:10px solid red;
}

#header{
  background-color:#770;
  height:4em;
  overflow: hidden;
  position:absolute;
}

#main{
  background-color:#077;
  top:4em;
  bottom:4em;
  overflow-y: scroll;
  width:100%;
  position:absolute;
}

#footer{
  background-color:#707;
  height:4em;
  overflow: hidden;
  bottom:0;
  position:absolute;
}

</style>

<script>
window.onload = function(){
  var s = '';
  for (var i=0; i<100; i++) { s+= 'test '; }
  document.getElementById('header').innerHTML = s;
  document.getElementById('footer').innerHTML = s;
  for (var i=0; i<3000; i++) { s+= 'test '; }
  document.getElementById('main').innerHTML = s;
}
</script>

</head>
<body>
  <div class="content">
    <div class="row" id="header">test
    </div>
    <div class="row">
      <div class="tresc" id="main">test
      </div>
    </div>
    <div class="row" id="footer">test
    </div>

  </div>

</body>
</html>