Bootstrap`s Sidebar With Fixed Footer And Scrollable Div

As you see from the picture below the part of sidebar where I have scrollable TreeView didnt work, also I need to have fixed footer to this sidebar that doesn't move when user scro

Solution 1:

You can use the following HTML code:

<divclass="container-fluid"><divclass="row"><divclass="col-xs-3"><divstyle="position:fixed; top:0; bottom:40px; overflow-y:scroll; float:none; width:inherit;"><footerstyle="position:fixed; bottom: 0; height:40px; background-color:red;">footer</footer></div></div><divclass="col-xs-9"></div></div></div>

The left side and its footer both get a position: fixed Notice the width: inherit which guarantees that the fixed column gets the same width as its parent. You can do the same for the footer.

To active the scroll bar you should set both the top and bottom properties according to Have a fixed position div that needs to scroll if content overflows