我有一个宽度为100%的固定页眉。
#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}
浏览器滚动条在我的固定div下面。如何修复?
我有一个宽度为100%的固定页眉。
#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}
浏览器滚动条在我的固定div下面。如何修复?
这是因为在base.css的第9行设置了overflow-x: hidden;
body {
color: #444444;
font: 13px/20px Arial,Helvetica,sans-serif;
overflow-x: hidden; // remove this
}
overflow-x
,而是因为html
标签上的overflow-x
和overflow-y
。一旦我从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浏览器。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>
clip-path
调用的帮助。当其他建议都无效时,我以为我运气不好。这正是我所缺少的 :) - Sámal Rasmussen我在React应用程序中遇到了同样的问题。
将#root
的overflow-y: scroll
样式从#root
移动到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 */
}
我终于找到了一种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>
我解决这个问题的方法是先设置滚动条的宽度,然后将导航栏的宽度设为100%减去滚动条的宽度。
像这样:
.main-container::-webkit-scrollbar {
width: 8px;
}
.navbar{
display: flex;
position: fixed;
width: calc(100% - 8px);
height: 8rem;
z-index: 5000;
}
删除 HTML 标签中的 height:100%
。
在包含标题和内容的容器上设置 z-index
。