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

Question

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

整个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; 或者使用这个开源插件从你的元素中删除滚动条的宽度/高度：

Scrollbar Fixer

Answer 2

也许你的问题出在这段代码中

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

删除width:110%;，应该可以了。

这是Updated Fiddle

编辑

我想我之前误解了什么问题。

因为在您的情况下，您将position: fixed; 用于#wrapper 和#left-panel，并且都使用stlye left: 0，它们的位置将在视口左侧相互重叠，您基本上需要定位@987654330 @ of #wrapper 与#left-panel 不在同一位置，所以需要将这个添加到#wrapper 中

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

并删除

width:100%;

这是Updated Fiddle

要确保它是您想要的，请尝试将#content 中的div 的样式更改为width:200%; 并添加margin:20px;

编辑两个

scrollbar相互重叠的原因是因为在小提琴中你使用position: fixed作为#wrapper，因此不会在body中创建scrollbar，然后你添加overflow:auto在#wrapper 中，导致为#wrapper 而不是body 创建scrollbar，因此您需要将#wrapper 的CSS 更改为此

#wrapper{
    background:gray;
}

我不包括高度，因为对于div，height 是基于其中的孩子，所以你看不到灰色背景，除非你添加一些 padding 到它。

这是Working Fiddle

Answer 3

首先，您不必添加“位置：静态；”将样式添加到您的 div 中，因为默认情况下它是静态的。有两种方法可以解决您的问题：

添加“位置：相对；”进入#content 选择器并在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

或在#content 选择器中添加“位置：相对；z-index：1”（#content 的 z-index 应该高于 #left-panel 的）。

<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

最好， 马立克