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

Question

我在样式布局方面遇到了麻烦，无法实现我所需的效果。我有一个内容区域#content（您可以在示例图像中看到的灰色区域），里面有一个黄色元素。这个div是position: static; height: 100%;。现在我还有一个#left-panel div，也是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修复这个问题吗？

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

- user3631654

---

你能提供一些 Fiddle 链接吗？ - Kyojimaru

抱歉，我的能力是文本生成，我不能够提供关于图片的建议。 - Kyojimaru

抱歉，不是这样的。 - user3631654

Answer 1

您的包装元素是position:fixed;。我想您在谈论带有左侧导航面板的覆盖层。好吧，我遇到了类似的情况，并发现如果您的父元素也是position:fixed;，则不能使用position:fixed;。这会重叠父包装器（即覆盖层）的滚动条。

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

Scrollbar Fixer

- dude

Answer 2

也许你的问题就在这段代码里。

<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>

删除width:110%;，就可以正常运行了。

这里是更新后的 Fiddle

编辑

我之前误解了问题所在。

因为在你的情况下，你使用position: fixed;来设置#wrapper和#left-panel的样式，并且两者都使用left: 0的样式，它们的位置将重叠在视口的左侧，你基本上需要将#wrapper的left定位不要与#left-panel的相同位置，所以你需要将这个添加到#wrapper中。

left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;

并删除

width:100%;

这里是更新的 Fiddle。

为了确保你想要的效果，尝试将 #content 内部的 div 样式更改为 width:200%; 并添加 margin:20px;。

第二次编辑

scrollbar 重叠的原因是因为在 fiddle 中，您使用了 position: fixed 来设置 #wrapper，这不会在 body 中创建一个 scrollbar，然后您在 #wrapper 中添加了 overflow:auto，导致 scrollbar 被创建为 #wrapper 而不是 body，因此您需要更改 #wrapper 的 CSS 如下：

#wrapper{
    background:gray;
}

我没有包含高度，因为对于 div 元素来说，height 基于其内部的子元素，所以你无法看到灰色背景，除非你添加一些 padding。

这里是 Working Fiddle。

- Kyojimaru

---

抱歉，但你又误解了问题 :P 这是我写的内容：“如果面板在视图中，则仅减少内容宽度对我来说不是解决方案”。但这正是你所做的！滚动条不在整个窗口上，而是只在内容区域内。这看起来像是在使用框架集，我不喜欢这种外观。 - user3631654

抱歉，我误解了两次。所以你想要的是#content占据视口的100%宽度，并且当有水平滚动条时，滚动条不会被#left-panel覆盖，而且只需要使用CSS实现？ - Kyojimaru

是的，确切地说这就是我正在寻找的。 - user3631654

我知道我可以用JS找到滚动条的宽度，然后设置左侧面板的宽度减去滚动条的宽度，但我不喜欢用JavaScript来固定我的布局。 - user3631654

@user3631654，已更新答案。如果您坚持只使用CSS，我认为这是最好的解决方案。 - Kyojimaru

Answer 3

首先，您不必将“position: static;”样式添加到您的div中，因为它默认是静态的。有两种方法可以解决您的问题：

在#content选择器中添加“position: relative;”，并在HTML中在#left-panel之后声明#content。

<div id="left-panel"></div>
<div id="content"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
}

Codepen: http://codepen.io/anon/pen/yoHxl

或者将 "position: relative; z-index: 1"（#content 的 z-index 应该比 #left-panel 更高） 添加到 #content 选择器中。

<div id="content"></div>
<div id="left-panel"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
    z-index: 1;
}

Codepen: http://codepen.io/anon/pen/HgwDx

最好的， Marek

- Marek Streich

---

抱歉，但那不是我正在寻找的解决方案。左侧面板应该保持在前景中。请看我的示例图像。那正是我想要实现的，但左侧面板不应重叠内容的滚动条！ - user3631654