one column layout

<html>
<head>
<title>http://stackoverflow.com/questions/11960636/how-to-make-a-div-stretch-its-height-between-two-other-divs-and-center-its-conte</title>

<style type="text/css">

html,body {
  margin:0;
  padding:0;
}

#top {
  position: fixed;
  top:0;
  width:100%;
  height:100px;
  background-color:green;
  z-index:1;
}

#middle {
  position: relative;
  width:99%;
  margin-top: 110px; /*top menu*/
  margin-bottom: 110px; /*bottom div*/
  border:5px solid blue;
  border:5px solid blue;
  text-align:center;
  z-index:0;
}

#bottom {
  position:fixed;
  bottom:0;
  width:100%;
  height:100px;
  background-color:yellow;
  z-index:1;
}

</style>

</head>
<body>

<div id="top">HEADER
</div>

<div id="middle">This is the body<br/>
</div>

<div id="bottom">FOOTER
</div>

</body>
</html>