可以防止滚动条影响的全屏遮罩效果_html/css_WEB-ITnose

可以防止滚动条影响的全屏遮罩效果:
遮罩效果当前在很多应用中都有使用，当然也比较简单，无非是在需要的时候出现一个具有透明效果的全屏元素，但是有一种情况需要特别注意一下，那就是页面出现滚动条的时候，这个时候如不进行一下处理，遮罩层效果的表现可能不伦不类。
代码如下:

   
    
蚂蚁部落欢迎您，
  

上面的代码中，点击按钮可以弹出遮罩层效果，但是向下拖动滚动条，则会发现下面的部分并没有遮罩，那么此效果也就失败了，代码修改如下:

   
    
蚂蚁部落欢迎您，
   
 

在上面的代码中，当点击按钮弹出遮罩层的时候设置body的高度为100%，设置值为100%可以使body的高度和浏览器客户区的高度相同，然后设置overflow属性值为hidden，这样的话超出的部分就会被隐藏，于是弹出遮罩层的话，也就不会出现滚动条了，点击关闭遮罩层的时候，再将一切恢复原状。需要特别注意的是css中添加了如下代码:

html{height:100%}

具体相关内容可以参阅设置html,body高度100%的作用一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14507

更多内容可以参阅:http://www.softwhy.com/divcss/