滚动条重叠固定DIV - Twitter Bootstrap

时间:2014-03-21 12:57:02

标签: html css html5 twitter-bootstrap

我正在为我的新项目使用此引导程序模板(http://www.bootply.com/render/96266) 我对设计指标非常满意,我面临的唯一一个小问题是静态顶部的导航栏与滚动条重叠。

我尝试将导航栏更改为固定顶部,但它仍然与滚动条重叠。经过大量的故障排除后,我发现.column类有溢出:auto,这就是导致问题。 当我决定使用overflow:hidden / scroll / inherit但结果不是我所期望的。

有人可以帮忙吗?

JSFiddle : http://jsfiddle.net/YHRwA/2/

3 个答案:

答案 0 :(得分:1)

你的回答是正确的:

  

当您粘贴导航栏时,请记住要考虑隐藏区域   下。添加40px或更多的填充到。一定要添加   这是在核心Bootstrap CSS和可选响应之前   CSS

See here

答案 1 :(得分:0)

您的元素是否已应用z-index? 这允许渲染的元素以“深度”排列。显示[超出什么]

答案 2 :(得分:0)

他们有一个主要的div,其位置将跨越整个高度和浏览器视图端口(top:0;left:0;right:0;bottom:0}&的宽度所有内容然后定位在该div内。名称为.box

然后还有另一个容器,应用于该div的类是.column&它已将溢出设置为auto。所以滚动条实际上​​不是浏览器,而是这个div&所有这些都设置为100%的高度,这将占用视口高度&宽度。

现在浏览器默认滚动条宽度会将浏览器更改为浏览器。所以我想你完全重做了HTML。

要快速解决此问题,您可以删除该框的bottom:0