固定Div重叠静态div的滚动条

Question

我很难像我想要的那样设计我的布局样式.我有一个内容区域#content(示例图像中可以看到的灰色),里面有一个黄色元素.这个div是position:static;height:100%;.现在我也有一个#left-paneldiv position:fixed;height:100%;.问题是,如果内容区域没有足够的空间,则会出现水平滚动条.这将与固定div重叠.对我而言,这完全符合逻辑,但我不知道如何解决这个问题.我的#content元素滚动条应该在窗口的整个宽度上可见.因此,如果面板在视图中,仅减小内容的宽度对我来说不是一个解决方案.

整个CSS:

#content{
    width:100%;
    height:100%;
    background:grey;
}
#left-panel{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100%;
    overflow-y:auto;
}

有人可以用纯CSS帮助我解决这个问题吗？

小提琴:http://jsfiddle.net/a2wn8x5z/1/

Answer 1

您的包装元素position:fixed;我认为您正在谈论左侧带有导航面板的叠加层.好吧,我有一个类似的情况,并发现,position:fixed;如果你的父元素也是如此,你不能使用position:fixed;.这将与父包装器(覆盖层)的滚动条重叠.

因此,您必须使用position:absolute;或使用此开源插件从元素中删除滚动条的宽度/高度:

滚动条修复器