Stack 3 divs while bottom div height is adjusted automatically - html

Question

I've got 3 divs.
<div class="top"> TOP </div>
<div class="middle"> MIDDLE </div>
<div class="bottom"> BOTTOM </div>
.top{
position: fixed;
top:0;
width: 100%;
}
.bottom{
position: fixed;
bottom:0;
width: 100%;
}
middle div contains a dynamic data. So I have enabled the scrollbar there.
.middle{
overflow-y: auto;
width: 100%;
}
My question is, How can I stack the middle div and make thebottom adjusts its height automatically depending on the data in top and middle divs?
EDIT

Answer 1

the flex model is here to help you:
html, body {
height:100%;
margin:auto;
}
body {
display:flex;
flex-flow:column;
background:turquoise;
}
.middle {
flex:1;
overflow:auto;
background:tomato;
}
<div class="top"> TOP any height</div>
<div class="middle"> MIDDLE i scroll if too tall </div>
<div class="bottom"> BOTTOM any height</div>
demo http://jsfiddle.net/7yLFL/445/

Answer 2

Flex model with no restrictions on any section height:
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 22px;
line-height: 1.5em;
text-align: center;
color: #fff;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
width: 50%;
border: 1px solid #fff;
float: left;
}
.top {
background: none #59B2FF;
}
.middle {
flex-grow: 100;
overflow-y: auto;
background: none #FFB800;
}
.bottom {
align-self: flex-end;
width: 100%;
background: none #A1FFB5;
color: #fff;
}
<div class="wrapper wrapper1">
<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>
<div class="wrapper wrapper2">
<div class="top">top</div>
<div class="middle">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.?</div>
<div class="bottom">bottom</div>
</div>
Also on Fiddle playground.

Answer 3

I would create an .outer div that is basically a container for .top, .middle, .bottom. You would also create a css class called .inner that has position absolute:
#CSS
.outer {
#Can position however you want
}
.inner {
position: relative;
}
.top {
top: 0;
width: 100%;
}
.middle {
overflow-y: auto;
max-height: 100px; //Optional; if you want to specify the maximum height this div can take
width: 100%;
}
.bottom {
width: 100%;
bottom: 0
}
Then in your HTML:
<div class="outer">
<div class="inner top"> TOP </div>
<div class="inner middle"> MIDDLE </div>
<div class="inner bottom"> BOTTOM </div>
</div>
Here is a plunker DEMO

Answer 4

Just put:
.middle{
position: relative;
height: auto;
}
Since, you have put position fixed for top container, so it won't move out of screen and will be stuck at the top while the other two divs will be scrollable under the top div.