Scroll bar overlapping fixed DIV - Twitter Bootstrap

I am using this bootstrap template for my new project ( ) 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 :


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

See here

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.

Need Your Help

LINQ where within a where

c# linq web-services boolean

So I am abit stuck on a linq statement below,

Opening, Editing, and Saving a .CSV inside a Java program

java windows netbeans jfilechooser

I'm supposed to create a program that displays an editable CSV in a spreadsheet format, then pulls and appends information from an LDAP source into said spreadsheet and saves it. As it is a lot to ...