Written by 
I have a div at the top of my page (#top) and one set to the bottom of the page with absolute position (#bottom). I have a div in the middle (#middle) with an inner component (#middle-inner). I would like to grow this middle component to fill the entirety of the space between #top and #bottom, without changing the size of the inner content (#middle-inner). How can I do this?
<html>
<head>
<style>
body {
height:100%;
}
#top {
background-color:purple;
}
#middle {
background-color:green;
}
#middle-inner {
width: 100px;
height:200px;
background-color: red;
}
#bottom {
background-color:blue;
width:100%;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div id='top'>
top
</div>
<div id='middle'>
middle
<div id='middle-inner'>
middle inner
</div>
</div>
<div id='bottom'>
bottom
</div>
</body>
</html>