我有一个宽度为100%的固定页眉。
#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}
浏览器滚动条在我的固定div下面。如何修复？
浏览器滚动条位于我的固定div下方
89
- Grufas
1
2你可以提供现场链接吗？ - NullPoiиteя
14个回答
54
这是因为在base.css的第9行设置了overflow-x: hidden;
body {
color: #444444;
font: 13px/20px Arial,Helvetica,sans-serif;
overflow-x: hidden; // remove this
}
- NullPoiиteя
4
3如果我将 z-index 设置为-1，则问题得到解决。但也许还有其他方法？ - Grufas
3非常感谢，这很有帮助！我还需要从body中删除"overflow: auto;"。感谢您的时间！ - Grufas
21我不明白这个问题的解决方案是什么？似乎发起此线程的 OP 从未说明他的解决方案。我看到 z-index：-1 可以解决问题，不过我不能使用这个解决方案。是否有其他方法可以解决这个问题？ - TCD Factory
7同样的问题，无法去除溢出...解决方案呢？我们应该能够将滚动条的 z-index 设置为无限大或其他什么东西。 - Caio Vianna Lima Netto
17
问题不在于标签上的
overflow-x，而是因为html标签上的overflow-x和overflow-y。一旦我从HTML标签中删除了这些属性，我就可以在标签上设置任何溢出。这种情况发生在以下情况下：
overflow-x设置为auto、hidden、overflow或scrolloverflow-y设置为auto、hidden、-webkit-paged-x或-webkit-paged-y
overflow-x或overflow-y引起的，因为overflow会同时设置两者。
我使用的是Windows 10上的Chrome 67浏览器。- NonameSL
15
- mike tracker
1
24不能以不同的值重复添加相同的属性。第一个将被第二个覆盖，但这对我也无济于事。 - Sajidur Rahman
4
clip-path 属性可以帮助您。
您需要将标题置于可滚动内容中，但由于它具有固定位置，因此这并不重要。然后，如果将 clip-path: inset(0 0 0 0); 应用于容器，则会剪切掉此矩形之外的所有内容。
function toggle() {
content.classList.toggle('clip');
}#container {
overflow-y: auto;
width: 300px;
height: 100px;
padding: 0;
}
#fixed {
position: fixed;
left: 0;
top: 0;
width: 350px;
height: 50px;
background: blue;
}
#content {
height: 1000px;
width: 100%;
background: yellow;
}
#content.clip {
clip-path: inset(0 0 0 0);
}<div id="container">
<div id="content">
<div id="fixed"></div>
</div>
</div>
<button onclick="toggle()">toggle clip-path</button>- Kirill Simonov
2
它无法与自定义滚动条一起使用。 - Max
1非常感谢您对这个神秘的
clip-path调用的帮助。当其他建议都无效时，我以为我运气不好。这正是我所缺少的 :) - Sámal Rasmussen3
我在React应用程序中遇到了同样的问题。
将#root的overflow-y: scroll样式从#root移动到body选择器中。这解决了我的问题。
- Nikita
2
我遇到了这个问题，原因是我在html选择器和body选择器中都设置了overflow-x: hidden。所以我将它从html选择器中移除，并仅放在body选择器中。
所以：
所以：
html, body {
height: 100%; /* <-- was not an issue and remained */
overflow-x: hidden; /* <-- remove this from html selector */
}
/* to */
body {
overflow-x: hidden; /* moved it here so then it worked for me */
}
- Mohamed
2
我终于找到了一种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 Edge浏览器，当我的电脑切换到平板模式时，代码始终有效。检查一下是否可以使用:before替代div id="aaaa"，使其更加纯粹，并且独立于其他div。
更新：在Edge浏览器中，通过before不起作用，因为进入平板模式时滚动条不会改变。
如果您在bbbb元素中遇到隐藏内容的问题，请尝试不要将position: absolute/fixed元素放置在bbbb容器中。
我还没有测试它在所有情况和浏览器中的表现。
更新：如本答案顶部提到的问题 - 在移动浏览器上，由于滚动条是动态的，只有当您滚动时才会出现，因此滚动条被覆盖。滚动条在所有浏览器中可能非常窄，因此您应该决定如何处理它。也许留出5个像素左右的边距？
- user3280060
2
我解决这个问题的方法是先设置滚动条的宽度，然后将导航栏的宽度设为100%减去滚动条的宽度。
像这样：
.main-container::-webkit-scrollbar {
width: 8px;
}
.navbar{
display: flex;
position: fixed;
width: calc(100% - 8px);
height: 8rem;
z-index: 5000;
}
这是它的外观。
- Newbie
2
删除 HTML 标签中的 height:100%。
- Guilherme Nunes
2
在包含标题和内容的容器上设置 z-index。
- holmberd
4
我已经尝试过这个，但它不起作用，尽管我把它放在最后面，但仍然无法点击。 - Kailegh
@Kailegh 可点击吗？我不知道你在说什么。 - holmberd
使用您的解决方案后，我的滚动条无法被点击或向下拖动。 - Kailegh
@Kailegh，没有代码就无法知道你遇到的问题。我建议你创建一个新问题，并提供示例代码。 - holmberd
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接