Scroll bar overlapping fixed DIV - Twitter Bootstrap
I am using this bootstrap template for my new project ( http://www.bootply.com/render/96266 ) I am much satisfied with the design metrics, the only small problem I am facing is that the navbar which is static-top is overlapping the scrollbar.
I tried changing navbar to fixed-top but still it overlaps the scrollbar.After lots of troubleshooting, I found out that .column class has overflow:auto and that is causing the problem. When I decided to use overflow:hidden / scroll / inherit but the result was not what I expected.
Can someone help with this?
JSFiddle : http://jsfiddle.net/YHRwA/2/
Your answer is right in the docs:
When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS
does your element have a z-index applied? This allows the rendered elements to be arranged with a 'depth' of display [what goes above what]
They have one main div which is positioned in way that it will span the whole height & width of the browser view-port (top:0;left:0;right:0;bottom:0} & all content is then positioned inside that div. The name is .box.
Then there is another container, the class applied to that div is .column & it has overflow set to auto. So the scroll bar is not actually of the browser but of this div & All of them are set height to 100%, this will take up the viewport height & width.
Now browser default scroll bar width changes browser to browser. So I guess you've to entirely redo the HTML.
To resolve it fast you can remove the bottom:0 of the box.