Stack 3 divs while bottom div height is adjusted automatically

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

It is still not clear what you want. Are those 3 divs body sections? Are all with unknown heights? Should bottom be a sticky footer? Can you give us current styles for each block? Can you update this [Fiddle](https://jsfiddle.net/54cc01jy/)? — skobaljic, Mar 18 '16 at 12:41
The div's have id's, but in the css code you are specifying classes? — M Zeinstra, Mar 18 '16 at 12:44
@skobaljic Thank you. The 3 divs should fit the screen height. `top` , `middle` div height is based on it's contents. All 3 divs should stick in their positions. — Becky, Mar 18 '16 at 12:48
@Becky Could you post a plunkr of exactly what you are trying to show or what you currently have? — Evan Bechtol, Mar 18 '16 at 12:48
@Becky your post says that the bottom div has a scrollbar, is this a typo? Your picture shows the middle div with scrollbar. — Evan Bechtol, Mar 18 '16 at 12:57
@EvanBechtol - Thanks again. Yes that was a typo. I've altered it. — Becky, Mar 18 '16 at 12:59
looks a duplicate of http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/2509848 demo http://jsfiddle.net/7yLFL/445/ — G-Cyrillus, Mar 18 '16 at 13:04

score 2 · Accepted Answer · answered Mar 18 '16 at 13:10

2

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/

answered Mar 18 '16 at 13:10

G-Cyrillus

101,410
14
105
129

You need to change overflow to overflow-y: auto Also, you should use a max-height attribute most likely, otherwise the scroll never appears – Evan Bechtol Mar 18 '16 at 13:14
@EvanBechtol can you set fiddles with issue you noticed ? , you understand this a 101 template based on flex value behavior ? – G-Cyrillus Mar 18 '16 at 13:20
It wasn't scrolling in the snippet that you posted, I clicked the fiddle afterwards and see that it's correct ;) my mistake – Evan Bechtol Mar 18 '16 at 13:56

skobaljic · Answer 2 · 2016-03-18T13:22:13.853

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.

Evan Bechtol · Answer 3 · 2016-03-18T14:00:44.203

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

score 0 · Answer 4 · answered Mar 18 '16 at 12:51

0

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.

answered Mar 18 '16 at 12:51

Abhishek Dhanraj Shahdeo

1,356
2
14
35

What you want to keep the bottom as footer fixed? If so, then you can make the bottom div as position fixed too. – Abhishek Dhanraj Shahdeo Mar 18 '16 at 12:55
Thanks. Won't the content of `middle` run under `top` and `bottom` – Becky Mar 18 '16 at 12:57
Yes, it will in that case. – Abhishek Dhanraj Shahdeo Mar 18 '16 at 12:59

Stack 3 divs while bottom div height is adjusted automatically

4 Answers4