固定的Div与静态div的滚动条重叠 [英] Fixed Div overlaps scrollbar of static div

问题描述

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

I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in 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修复此问题吗?

Can somebody help me fixing this with pure CSS?

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

推荐答案

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

Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).

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

So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:

滚动条修复程序

这篇关于固定的Div与静态div的滚动条重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！