固定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解决这个问题吗？

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

Answer 1

你的包装元素是position:fixed;我认为你在谈论左边有导航面板的叠加层。好吧，我有类似的情况，并发现，如果您的父元素也是position:fixed;，则无法使用position:fixed;。这将与父包装器（叠加层）的滚动条重叠。

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

<强> Scrollbar Fixer

Answer 2

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

添加“position：relative;”进入#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

或者将“position：relative; z-index：1”（#content的z-index应该是＃left-panel的较高者）添加到#content selector中。

<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

最佳， 马立克

Answer 3

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

<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，他们的位置将在视口左侧相互重叠，您基本上需要将left的{​​{1}}放置在与#wrapper不同的位置，因此您需要将其添加到#left-panel

#wrapper

并删除

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

这是Updated Fiddle

以确保它符合您的要求，尝试将width:100%; 内div的样式更改为#content并添加width:200%;

编辑两个

margin:20px;相互重叠的原因是因为你在scrollbar使用position: fixed，因此不会在{#wrapper中创建scrollbar 1}}，然后在body中添加overflow:auto，导致为#wrapper创建scrollbar，而不是#wrapper，因此您需要将body的{​​{1}}更改为此

CSS

我没有包含高度，因为对于#wrapper，#wrapper{ background:gray; } 基于其中的子项，因此您无法看到灰色背景，除了您添加一些{{1对它来说。

这是Working Fiddle