Fixed height scrollable div inside of a bootstrap 3 column

Question

I have seen similar questions, but nothing exactly like I'm trying. Most of the examples make the entire col-md-2 scroll, I need content within that to scroll.

Inside a fluid container, I have a left navigation type column, and a right content column.

Inside the left column I want a div at the top class="top", and a div at the bottom class="bottom". And in the middle I have a list. Say bottom and top are 100px. I want the list to take up all of the space between the two, and if the list content is larger than this area, I want it to scroll. If the list content is smaller than the space between the two, I want it to take up all of that space (not collapse).

Here is a psuedo example:

<div class="container-fluid">
    <div class="row">
         <div class="col-md-2">

            <div class="top">
                . . .
            </div>

            <div class="scroll-area">
                <ul>
                    <li>one</li>
                    . . .
                    <li>one-thousand</li>
                </ul>
            </div>

            <div class="bottom">
                . . .
            </div>

         </div> 
         <div class="col-md-10 content">
         </div>
    </div>
  </div>

  <style>
   .top, .bottom { height: 100px; }
  </style>

I was able to do this before without bootstrap by giving "scroll-area" absolute positioning. I can make the scroll-area work with fixed positioning, but the containing "col-md-2 is collapsed, so "bottom" sits up top.

How can I make this work?

Answer 1

This answer is for when you dont know the window height.

You can still achieve this using position:absolute; you just tell the blue and red parts to take top and bottom, the green part should have top 100px, and then you just use css 'calc' to get its height.

Styles

.side{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  padding:0;
}

.scroll-area{
  width:100%;
  height:calc(100% - 200px);
  margin-top:100px;
  background-color:green;
  float:left;
  overflow-y:scroll;
}

html

<div class="row">
       <div class="col-md-2 col-xs-2 side">
          <div style="position:relative;width:100%;height:100%;">
            <div class="top" style="background-color:red;top:0;width:100%;height: 100px; position:absolute;">
                top
            </div>

            <div class="scroll-area">
                <ul>
                    <li>one</li>
                </ul>
                <div style="width:100%;height:10000px;">
                </div>
                <ul>
                    <li>one-thousand</li>
                </ul>
            </div>

            <div class="bottom" style="background-color:blue;bottom:0;width:100%;height: 100px; position:absolute;">
                bottom
            </div>
          </div>

       </div> 
       <div class="col-md-10 col-xs-offset-2 content col-md-offset-2">
         <div style="height:1000px;width:100%;">

         </div>
       </div>
  </div>

take a look at this filddle -

https://jsfiddle.net/jxo6pmju/12/

Answer 2

Here I added fiddle link for what you had problem, with . Hope this helps`

<div class="fixed">
  <b>Fixed Content</b>
  <br/>
  <br/>
  <p>top</p>
</div>
<div class="scrollit">
  <b>Scroll Content</b>
  <br/>
  <br/>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>


</div>
<div class="fixed">
  <b>Fixed Content</b>
  <br/>
  <br/> bottom
</div>

scrollable middle section