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.
我正在为我的新项目使用这个引导模板(http://www.bootply.com/render/96266)我对设计指标非常满意,我面临的唯一小问题是导航栏是静态顶部与滚动条重叠。
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.
我尝试将导航栏更改为固定顶部,但它仍然与滚动条重叠。经过大量的故障排除后,我发现.column类有溢出:auto,这就是导致问题。当我决定使用overflow:hidden / scroll / inherit但结果不是我的预期。
Can someone help with this?
有人可以帮忙吗?
JSFiddle : http://jsfiddle.net/YHRwA/2/
3 个解决方案
#1
1
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
当您粘贴导航栏时,请记住要考虑下面的隐藏区域。添加40px或更多的填充到。一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它
#2
0
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]
你的元素是否应用了z-index?这允许渲染的元素以“深度”显示排列[超出什么]
#3
0
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.
它们有一个主要div,其位置将跨越浏览器视图端口的整个高度和宽度(顶部:0;左:0;右:0;底部:0}然后所有内容都位于其中div。名称是.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.
然后有另一个容器,应用于该div的类是.column&溢出设置为auto。所以滚动条实际上并不是浏览器,而是这个div&所有它们都被设置为100%,这将占用视口高度和宽度。
Now browser default scroll bar width changes browser to browser. So I guess you've to entirely redo the HTML.
现在浏览器默认滚动条宽度将浏览器更改为浏览器所以我猜你要完全重做HTML。
To resolve it fast you can remove the bottom:0 of the box.
要快速解决它,您可以删除框底部:0。
#1
1
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
当您粘贴导航栏时,请记住要考虑下面的隐藏区域。添加40px或更多的填充到。一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它
#2
0
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]
你的元素是否应用了z-index?这允许渲染的元素以“深度”显示排列[超出什么]
#3
0
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.
它们有一个主要div,其位置将跨越浏览器视图端口的整个高度和宽度(顶部:0;左:0;右:0;底部:0}然后所有内容都位于其中div。名称是.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.
然后有另一个容器,应用于该div的类是.column&溢出设置为auto。所以滚动条实际上并不是浏览器,而是这个div&所有它们都被设置为100%,这将占用视口高度和宽度。
Now browser default scroll bar width changes browser to browser. So I guess you've to entirely redo the HTML.
现在浏览器默认滚动条宽度将浏览器更改为浏览器所以我猜你要完全重做HTML。
To resolve it fast you can remove the bottom:0 of the box.
要快速解决它,您可以删除框底部:0。