how is the sidebar sticking to the bottom of the page in this bootstrap template?

Question

I don't really understand how they are making this sidebar stick to the bottom of the page in this bootstrap template.

http://getbootstrap.com/examples/dashboard/#

If you look at the .sidebar class CSS properties, there is this weird

position: fixed; top: 51px; bottom: 0px;

But really no rule about the height of the column, and since it should automatically adjust to the height of the content, I'm a bit lost here.

I made an attempt with this CodePen :

http://codepen.io/anon/pen/ojQvjj

but really, the only way I found to make the sidebar stick to the bottom was to add a height property.

Thanks a lot for the answers, it will really help me make progress with CSS.

Answer 1

If you make a container or element ( .sidebar ) with position: fixed; + top: 0; bottom: 0; top: 0; bottom: 0; That container will 'stick' to the top and bottom of the parent element ( body ).
When you use a 'fixed navbar' in bootstrap, you need to add a margin-top > 50px or, in this case, top: 51px; so the sidebar starts after the navbar and it's not hiding behind it.
At some point it will overflow, that's why they add, overflow-y: hidden or scroll;

To be clearer. If you remove those .col-sm-3 .col-md-2 from that element, and give the .sidebar a left: 0; right: 0; left: 0; right: 0; it will take the whole viewport area.

Answer 2

Here if you see the code col-md-2 in first div and col-md-10 in second div and making first div as position: fixed; and when we make a div as position fixed it don't acquire any space in view port. and second div with col-md-10 will acquire that place but it will be hidden behind top position of first div so we use .col-md-offset-2 to move second div to 16.66 % right direction and top:0 and bottom:0 for giving position to a fixed div.

and whatever you want is there: please check you this codepen:

http://codepen.io/Gkakar/pen/KdrzBJ