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

Question

我无法按照自己的意愿设置布局样式。我有一个内容区域 #content(您可以在示例图像中看到的灰色)，里面有一个黄色元素。这个 div 是 position:static;height:100%;。现在我还有一个 #left-panel div，带有 position:fixed;height:100%;。问题是，如果内容区域没有足够的空间，则会出现水平滚动条。这将与固定的 div 重叠。对我来说，这一切都是合乎逻辑的，但我不知道如何解决这个问题。 #content 元素的滚动条应该在整个窗口宽度内可见。因此，如果面板在 View 中，仅减小内容的宽度对我来说不是解决方案。

整个CSS:

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

谁能帮我用纯 CSS 解决这个问题？

fiddle :http://jsfiddle.net/a2wn8x5z/1/

Answer 1

您的包装器元素是 position:fixed; 我认为您是在谈论左侧带有导航面板的叠加层。好吧，我遇到了类似的情况并发现，如果您的父元素也是 position:fixed;，则您不能使用 position:fixed;。这将与父包装器的滚动条(叠加层)重叠。

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

Scrollbar Fixer