I am trying to create a messaging sidebar. I want sidebar’s height to increase on scroll and remain 100% height of the viewport when the navbar is not visible on viewport. I want to keep the header and form on bottom fixed. So far I have created this http://codepen.io/azs06/full/zrjYNB/
I want to enable scrolling on the middle section when the viewport height is smaller, but because the sidebar-bottom div is set to absolute position, the sidebar-middle div contents going behind it.
I would highly appreciate if anyone can provide me any idea for a solution.