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

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下。如何解决？

5 个解决方案

#1

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

它因为溢出-x：隐藏;在base.css第9行

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

#2

This can be solved by adding overflow of 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

如果滚动设置在正文上，如果其结构为body> wrapper> header（具有固定位置），则内容如此

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.

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

Hope this helps..:)

希望这可以帮助..：）

#3

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边缘测试了移动设备。代码一直在运行。要检查这是否适用于：before而不是div id =“aaaa”，以使其更加css纯和其他divs相互依赖。

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容器中定位：absolute / fixed元素。

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

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

Update: the issue mentioned somewhere 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个像素左右的边距？

#4

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标签高度删除后解决了这个问题：100％;我添加了其他礼仪，以确保我有相同的结果。其他解决方案都没有帮助我。我希望这可以帮助别人。

#5

The issue isn't with overflow-x on the body tag. It's because of overflow-x andoverflow-y on the html tag. Once I removed this from the HTML tag, I could put whatever overflow I wanted on my body.

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

This happens when:

这种情况发生在：

• overflow-x is set to either auto, hidden, overflow, or scroll
• overflow-x设置为auto，hidden，overflow或scroll
• overflow-y is set to either auto, hidden, -webkit-paged-x, or -webkit-paged-y
• overflow-y设置为auto，hidden，-webkit-paged-x或-webkit-paged-y

It doesn't have to be an explicit call to overflow-x or overflow-y, as overflow sets both of them.

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

I'm on Chrome 67 using Windows 10.

我在使用Windows 10的Chrome 67上。