CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JDH
JDH

Reputation: 159

CSS to get a div stuck to the bottom of a bootstrap column

I'm working on a template that has three columns - two are lists and the third is going to be data. I'm trying to format the first two lists to be scrollable and then have the bottom of the list column to be a button. I would like the button to be fixed at the bottom always.

I assume that I have to add some sort of fixed height for the list-group and then set overflow-y: scroll to get the scroll look but how can i set the div at the bottom of the list to always be at the bottom of the page?

I've also included a plunker: http://plnkr.co/edit/3W6aFI1nngtMbWzYnUVC

Thanks for the help

For instance, this is what one column would look like: 

   <div class="col-sm-3">
  <!-- this div to be a scrollable list -->
  <div class="list-group contact">
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
  </div>
  <!-- This div to be stuck at the bottom -->
  <div>
    <button class="btn btn-block btn-default">New</button>
  </div>
</div>

Upvotes: 1

Views: 576

Answers (1)

jjk_charles
jjk_charles

Reputation: 1290

All you need to do is, add a fixed height to the Divs you want to be scrollable and allow scrollbars on the div.

Modify your CSS to include the below snippet or add them in-line to your Divs:

height:100px; overflow:scroll;

Working example here

Upvotes: 1

Related Questions