CSS 浏览器滚动条在我的固定 div 下

Browsers scrollbar is under my fixed div

提问by LifeIsShort

i have a fixed header with 100% width.

我有一个 100% 宽度的固定标题。

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

browsers scrollbar is under my fixed div. How to fix that?

浏览器滚动条在我的固定 div 下。如何解决？

采纳答案by NullPoiиteя

its because the overflow-x: hidden;in base.css line number 9

这是因为overflow-x: hidden;在 base.css 中的第 9 行

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}

回答by mike tracker

This can be solved by adding overflow of body

这可以通过添加 body 溢出来解决

from

从

overflow:auto;

to

到

overflow:auto;
overflow:initial;

This is your issue

这是你的问题

If your scroll is set on body, if its structured as body > wrapper > header (with fixed position), content so on

如果您的滚动设置在正文上，如果其结构为正文 > 包装器 > 标题（具有固定位置），内容等

below is your solution

以下是您的解决方案

solution for issue

问题的解决方案

note: this will work only on body but not on div container with scroll. you can also work with z-index to get it to work, but you will be specifying z-index to stack other elements in order to get it right.

注意：这仅适用于 body 而不适用于带有滚动的 div 容器。您也可以使用 z-index 使其工作，但您将指定 z-index 来堆叠其他元素以使其正确。

Hope this helps..:)

希望这可以帮助..：）

回答by NonameSL

The issue isn't with overflow-xon the body tag. It's because of overflow-xandoverflow-yon the htmltag. Once I removed this from the HTML tag, I could put whatever overflow I wanted on my body.

问题不overflow-x在于 body 标签。这是因为overflow-x和overflow-y在html标签上。一旦我从 HTML 标签中删除了它，我就可以在我的身体上放置任何我想要的溢出。

This happens when:

这发生在：

• overflow-xis set to either auto, hidden, overflow, or scroll
• overflow-yis set to either auto, hidden, -webkit-paged-x, or -webkit-paged-y

• overflow-x设置为auto, hidden, overflow, 或scroll
• overflow-y设置为auto, hidden, -webkit-paged-x, 或-webkit-paged-y

It doesn't have to be an explicit call to overflow-xor overflow-y, as overflowsets both of them.

它不必是对overflow-xor的显式调用overflow-y，因为overflow它们都设置了。

I'm on Chrome 67 using Windows 10.

我在 Chrome 67 上使用 Windows 10。

回答by holmberd

Set a z-indexon the container that is the parent for your header and your content.

z-index在作为标题和内容的父容器的容器上设置。

回答by OpenEX

A css hack (i finally found a way) for this with not much explanation made quickly - the first floated element is. I think to understand the principle how it works from the code below.

一个 css hack（我终于找到了一种方法）对此没有太多解释 - 第一个浮动元素是。我想通过下面的代码来理解它是如何工作的原理。

Update: And there is an issue for mobile browsers see below to assess whether or not youre ok with it.

更新：移动浏览器存在一个问题，请参见下文以评估您是否同意。

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

And final code, nearly the same with things you want see visible and working

和最终代码，几乎与您希望看到和工作的内容相同

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

What's important it works with mobile and desktop browsers. Actually for the moment i tested mobile on windows edge when my computer changed into tablet mode and then desktop one. The code works then all the time. To check is whether or not this works with :before instead of div id="aaaa" to make it more css pure and additional divs intependent.

重要的是它适用于移动和桌面浏览器。实际上，当我的计算机更改为平板电脑模式，然后更改为台式机模式时，我目前在 Windows Edge 上测试了移动设备。然后代码一直有效。要检查这是否适用于 :before 而不是 div id="aaaa" 以使其更纯 css 和额外的 div intependent。

Update: it doesn't work well with before for Edge browser doesn't change the scrollbar when entering the tablet mode.

更新：之前它不能很好地工作，因为 Edge 浏览器在进入平板电脑模式时不会更改滚动条。

If you encounter problems with hidden contents in bbbb element try not to position: absolute/fixed elements in the bbbb container.

如果您在 bbbb 元素中遇到隐藏内容的问题，请尽量不要在 bbbb 容器中定位：绝对/固定元素。

I haven't tested it yet for all situations and browsers.

我尚未针对所有情况和浏览器对其进行测试。

Update: the issue mentionedsomewhere on the top of this answer - yet on mobile browsers scrollbar is covered because the scrollbar is dynamic - it appears only when your scrolling and you know it is not part of any containers. The scrollbar probably is pretty thin on all browsers, so you should decide what to do with it. Maybe a little 5 pixels margin or so?

更新：此答案顶部某处提到的问题- 但在移动浏览器上滚动条被覆盖，因为滚动条是动态的 - 它仅在您滚动时出现并且您知道它不属于任何容器。滚动条可能在所有浏览器上都非常薄，因此您应该决定如何处理它。也许有点5像素左右的边距？

回答by Madalina Taina

I had this issue, my scrollbar was under my fixed header and I solved this after I removed from my html tag height: 100%;and I added other proprieties to be sure I have the same result. None of the other solutions helped me. I hope this helps someone.

我有这个问题，我的滚动条在我的固定标题下，我从 html 标签中删除后解决了这个问题，我height: 100%;添加了其他属性以确保我有相同的结果。其他解决方案都没有帮助我。我希望这可以帮助别人。

回答by Nikita

Had same problem in react app.

在反应应用程序中遇到同样的问题。

Moved overflow-y: scrollstyle from #rootto bodyselector. It solved issue for me.

将overflow-y: scroll样式从选择器#root移到body。它为我解决了问题。

回答by Tony Benjamin

This can be solved using 2 ways as below:

这可以使用以下两种方法解决：

1.First caculate the scrollbarWidth=el.offsetWidth - el.clientWidth

1.首先计算 scrollbarWidth=el.offsetWidth - el.clientWidth

2.Set fixed div left=scrollbarWidth

2.设置固定 div left=scrollbarWidth