css 关于width：100%的问题本身的页面超过了整个屏幕的大小，也就是有滚动条，但是它只能覆盖屏幕大小

发布网友发布时间：2022-11-01 03:13

共5个回答

热心网友时间：2023-10-18 04:36

这个一般是代码问题。
1、首先请检查设置的width：100%是相对于哪个元素，如果是相对于父元素，那么父元素是否是整个浏览器窗口（包括滚动条的部分）。
如：
<body>
<div style="width:100%;"></div>
</body>
2、css书写一定分清楚是相对于哪个元素，如相对于body为100%那么其样式一定会是生效的。

热心网友时间：2023-10-18 04:36

你好。这个问题一般需要配合JS来解决，基本思路是，当滚动条移动后。也将这一层DIV的坐标进行移动，以刚好弥补掉空缺的地方。

比如：

div.css("left", $(document).scrollLeft());
div.css("top", $(document).scrollTop());

当div是绝对定位，width和height都是100%的时候。

在window.onscroll的事件时做这个处理，就可以达到你要的效果。

热心网友时间：2023-10-18 04:37

一定要在body标签后面添加一个div，并且设置div的position为fixed，如：
.pageoverlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #383838;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
<body>
<div class="pageoverlay"></div>
</body>

热心网友时间：2023-10-18 04:37

一般这种情况应该是定位定错了
<div class='md-overlay'></div>
.md-overlay {
position: fixed; //注意一定要用fixed（屏幕内的网页窗口）定位
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(143, 138, 138,0.5);
z-index: 100;
}

热心网友时间：2023-10-18 04:38

上下的话不止是宽度啊，高度也要设置啊，还有半透明的设置也要注意。

css 关于width：100%的问题 本身的页面超过了整个屏幕的大小，也就是有滚动条，但是它只能覆盖屏幕大小

css 关于width：100%的问题本身的页面超过了整个屏幕的大小，也就是有滚动条，但是它只能覆盖屏幕大小