我有一个 100% 宽度的固定标题。
#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}
浏览器滚动条在我的固定 div 下。如何解决？
问问题
110633 次
12 回答
46
这是因为overflow-x: hidden;base.css 中的第 9 行
body {
color: #444444;
font: 13px/20px Arial,Helvetica,sans-serif;
overflow-x: hidden; // remove this
}
于 2012-10-23T10:39:51.340 回答
10
问题不overflow-x在于 body 标签。这是因为overflow-x和overflow-y在html标签上。一旦我从 HTML 标记中删除它，我就可以在我的身体上放置我想要的任何溢出。
这发生在：
overflow-x设置为auto,hidden,overflow, 或scrolloverflow-y设置为auto,hidden,-webkit-paged-x, 或-webkit-paged-y
它不必是对overflow-xor的显式调用overflow-y，因为overflow它们都设置了。
我在使用 Windows 10 的 Chrome 67 上。
于 2018-06-28T11:24:26.837 回答
2
z-index在作为标题和内容的父容器的容器上设置 a 。
于 2020-04-05T22:17:45.130 回答
2
height:100%在 html 标签中删除
于 2020-08-01T10:31:43.443 回答
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" 以使其更加纯 css 和额外的 div 独立。
更新：Edge 浏览器在进入平板模式时不会更改滚动条之前不能很好地工作。
如果您在 bbbb 元素中遇到隐藏内容的问题，请尽量不要在 bbbb 容器中定位：绝对/固定元素。
我尚未针对所有情况和浏览器对其进行测试。
更新：这个答案顶部某处提到的问题 - 但在移动浏览器上滚动条被覆盖，因为滚动条是动态的 - 它仅在您滚动并且您知道它不是任何容器的一部分时才会出现。滚动条可能在所有浏览器上都很薄，所以你应该决定如何处理它。可能有 5 像素左右的边距？
于 2017-01-31T23:41:10.853 回答
1
我解决这个问题的方法是设置滚动条的宽度，然后将 100% 的宽度设置为导航栏减去滚动条的宽度。
像这样：
.main-container::-webkit-scrollbar {
width: 8px;
}
.navbar{
display: flex;
position: fixed;
width: calc(100% - 8px);
height: 8rem;
z-index: 5000;
}
这是它的样子
于 2021-01-06T03:00:09.317 回答
1
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>于 2021-05-15T03:39:48.913 回答
1
我遇到了这个问题，我的滚动条在我的固定标题下，我从我的 html 标记中删除后解决了这个问题，height: 100%;我添加了其他属性以确保我有相同的结果。其他解决方案都没有帮助我。我希望这可以帮助别人。
于 2017-06-21T09:56:50.887 回答
0
这可以使用以下两种方式解决：
1.首先计算scrollbarWidth=el.offsetWidth - el.clientWidth
2.设置固定div left=scrollbarWidth
于 2019-08-02T05:58:00.053 回答
0
放在margin-right: 0px;topNavBar 对我有用
于 2020-11-26T09:44:48.460 回答
0
在反应应用程序中有同样的问题。
overflow-y: scroll将样式从#root选择器移至body选择器。它为我解决了问题。
于 2018-09-12T14:06:12.123 回答