首页 > 代码库 > 怎样使遮罩层铺满全屏，尝试过，成功
怎样使遮罩层铺满全屏，尝试过，成功
在一个html页面中，只有一个div,想是div充满全屏，常规的想法是设置高度宽度为100% ，代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <body bgcolor="red"> <div id="bg" style="width:100%;height:100%;"> </div> </body> </html> ??但是这样的话，div四周都会有边距，并没充满全屏。解决办法如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <style> html,body{ margin:0px; height:100%; } #bg{ width:100%; height:100%; MARGIN: 0px auto; background-color:blue; } </style> <body bgcolor="red"> <div id="bg"> </div> </body> </html> ??????
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,html{ margin:0; height:100%;}
.ni{ width:100px; height:100px; background:#F00; position:fixed; top:50%; left:50%; margin-top:-50px; margin-top:-50px; z-index:15;}
.close{ width:10px; height:10px; background:#00F;}
.cover{ width:100%; height:100%;opacity:.5; background:#CCC; position:absolute; top:0; left:0;display:none; z-index:10px; margin:0 auto;}
.open{ width:20px; height:20px; background:#FF0;}
</style>
</head>
<body>
<span class="open">dakai</span>
<div class="cover"> </div>
<div class="ni">shuoshi<span class="close">guanbi</span></div>
<script src="http://www.mamicode.com/jquery-1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".open").click(function(){
var $bw=$("body").width();
var $bh=$("body").height();
$(".cover").css({"width":$bw,"height":$bh,"display":"block"});
$(".ni").slideDown(100);
})
$(".close").click(function(){
$(".ni").slideUp(100);
$(".cover").hide(100);
})
});
</script>
</body>
</html>
怎样使遮罩层铺满全屏，尝试过，成功