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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 关于width:100%的问题 本身的页面超过了整个屏幕的大小,也就是有滚动条,但是它只能覆盖屏幕大小相关的知识,希望对你有一定的参考价值。

如题,我给屏幕蒙一层半透明的灰色,但是原来的页面很大,超过了一个屏幕的大小,这样子设置width:100%的话,一拉滚动条,下面的内容根本没有被半透明灰色覆盖。。。怎么办。。如何让所有页面都被覆盖呢?不能用一个具体的px值,因为要兼容其他大小的屏幕啊。。。求解!!

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

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


比如:

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


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

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

参考技术B 一定要在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>本回答被提问者采纳
参考技术C 一般这种情况应该是定位定错了
<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;
参考技术D 上下的话不止是宽度啊,高度也要设置啊,还有半透明的设置也要注意。

关于position:fixed的注意点

  position: fixed是CSS固定定位,一般用于导航栏吸顶效果。该属性使用的时候要注意一些细节:

  1.固定定位的盒子必须有宽度

  也就是必须设置width,如果没有设置宽度,那么该盒子的宽度就是内容撑开的宽度,如果没有内容那么会默认为0,从而无法在页面上看到。由于固定定位一般用于导航栏吸顶效果,所以必须给它设置合适的版心宽度。

  并且,如果是通过min-width属性和max-width属性设置盒子的宽度,起作用的是min-width。max-width不起作用,除非内容太多,把盒子撑开了。

  所以,强调一下,固定定位的盒子,必须有宽度。

  2.固定定位的盒子跟父级盒子无关,它是以屏幕为准

  看这个例子:  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            
        }
        .box{
            min-width: 320px;
            max-width: 540px;
            height: 2000px;
            background-color: #aaa;
            margin: 0 auto;
        }
        .fix{
            height: 40px;
            width: 100%;
            background-color: pink;
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fix">dfdds</div>
    </div>
</body>
</html>

  我们可以把父盒子.box设想为版心容器,那么.fix盒子就是我们要吸顶的导航条。

  我们已经定义了父盒子box的宽度,而后,给fix盒子的宽度定为width: 100%,意图就是让吸顶的盒子宽度与父盒子的宽度相等。

  可是我们运行页面的时候会看到下图的渲染效果。    

技术图片

 

   如果点击F12来查看元素,我们会看到fix盒子的宽度是1202,和body的宽度相等,而父盒子box的最大宽度是540px。这就证明了我们的观点:固定定位的盒子跟父级盒子无关,它是以屏幕为准。

  3.如何让固定定位的盒子,规规矩矩呆在父盒子内部?

  有多种方法来实现我们的要求,这里先只给出1种。

  给fixed固定定位的盒子设定宽度,这个宽度要跟父盒子宽度一致。千万不能只给一个width: 100%。比如本例中父盒子box给了min-width和max-width,那么子盒子fix也要给相同的一套min-width和max-width。  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            
        }
        .box{
            min-width: 320px;
            max-width: 540px;
            height: 2000px;
            background-color: #aaa;
            margin: 0 auto;
        }
        .fix{
            height: 40px;
            min-width: 320px;
            max-width: 540px;
            width: 100%;
            background-color: pink;
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fix"></div>
    </div>
</body>
</html>

  运行效果如下,完美。

技术图片   

 

以上是关于css 关于width:100%的问题 本身的页面超过了整个屏幕的大小,也就是有滚动条,但是它只能覆盖屏幕大小的主要内容,如果未能解决你的问题,请参考以下文章

关于CSS 自适应问题。

如何用CSS让背景图能够撑满本身会滚动的页面?

CSS 粘性页脚,宽度为 100%

css中width的计算方式,以及width:100%的参考系

关于height:100%不生效的问题

我用html5 做了个手机网站 如何让图片本身100%放大