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

Question

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

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

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

Answer 1

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

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

Answer 2

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

从

overflow:auto;

至

overflow:auto;
overflow:initial;

This is your issue

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

以下是您的解决方案

solution for issue

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

希望这可以帮助..：）

Answer 3

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

这种情况发生在：

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

它不一定是对overflow-x或overflow-y的明确调用，因为overflow设置了它们。

我在使用Windows 10的Chrome 67上。

Answer 4

一个css hack（我终于找到了一种方法）为此做了很快的解释 - 第一个浮动元素是。我想从下面的代码中了解它的工作原理。

更新：移动浏览器存在一个问题，请参阅下文，以评估您是否正常使用它。

<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>

最后的代码，几乎与您想要的东西相同，看得见和工作

<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>

它适用于移动和桌面浏览器，这一点很重要。实际上，当我的计算机改为平板电脑模式然后桌面模式时，我在Windows边缘测试了移动设备。代码一直在工作。要检查这是否适用于：before而不是div id =“aaaa”，以使其更加css纯和其他divs相关。

更新：它在以前不适用于Edge浏览器在进入平板电脑模式时不会更改滚动条。

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

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

更新：在这个答案的顶部提到的问题 - 但在移动浏览器上滚动条被覆盖，因为滚动条是动态的 - 它只在你滚动时出现，你知道它不是任何容器的一部分。所有浏览器上的滚动条可能都很薄，因此您应该决定如何处理它。也许有一点5像素左右？

Answer 5

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

Answer 6

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

将overflow-y: scroll风格从#root移动到body选择器。它解决了我的问题。