Fixed height scrollable div inside of a bootstrap 3 column

10
votes

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.

enter image description here

How can I make this work?

2
htmlcsstwitter-bootstrap-3
What is the width of left part and do you want to use Flexbox? - Nenad Vracar
The width should fill 100% of the containing bootstrap column, which is col-md-2 right now col-md-2 is width: 16.66666667%;. So if I changed it to col-md-3 (width: 25%), the content should fill that. I think flexbox would be ok. - user210757
Does left part have position: fixed; - Nenad Vracar
negative. I talk about trying that in "scroll-area" in my question. - user210757

2 Answers

7
votes

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/

2
votes

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