css 关于width:100%的问题 本身的页面超过了整个屏幕的大小,也就是有滚动条,但是它只能覆盖屏幕大小
如题,我给屏幕蒙一层半透明的灰色,但是原来的页面很大,超过了一个屏幕的大小,这样子设置width:100%的话,一拉滚动条,下面的内容根本没有被半透明灰色覆盖。。。怎么办...
如题,我给屏幕蒙一层半透明的灰色,但是原来的页面很大,超过了一个屏幕的大小,这样子设置width:100%的话,一拉滚动条,下面的内容根本没有被半透明灰色覆盖。。。怎么办。。如何让所有页面都被覆盖呢?不能用一个具体的px值,因为要兼容其他大小的屏幕啊。。。求解!!
展开
6个回答
展开全部
你好。这个问题一般需要配合JS来解决,基本思路是,当滚动条移动后。也将这一层DIV的坐标进行移动,以刚好弥补掉空缺的地方。
比如:
div.css("left", $(document).scrollLeft());
div.css("top", $(document).scrollTop());
当div是绝对定位,width和height都是100%的时候。
在window.onscroll的事件时做这个处理,就可以达到你要的效果。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
一定要在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>
.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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
一般这种情况应该是定位定错了
<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;
}
<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;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
上下的话不止是宽度啊,高度也要设置啊,还有半透明的设置也要注意。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询