css全屏，div容器全屏显示_div+css教程,div教程,css兼容性教程,css特效教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

今天，我爱模板网在做一个手机站的时候，一个左侧弹出菜单，需要高度全屏，宽度半屏，后面的半透明灰色遮罩高度和宽度都是全屏。这个，一般我都是用js获取屏幕的宽高来解决的。有没有css设置的方法呢。经过查询，我发现css的确可以做到，不用js也可以了。具体方法是：

1、将您需要全屏的容器，加个浏览器定位：position:fixed（或者position:absolute）。

2、设置该容器的宽高都是 100%。这样，就能全屏了。

3、如果页面有其他类容，本容器会在内容的下方显示，请将它的 top值，改成0。

注：此方法测试到了IE7，皆兼容。

运行下面的代码，看看效果是不是这样：

<!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>div容器全屏显示 - 我爱模板网 www.5imoban.net</title> <style> *{margin:0px; padding:0px;} div{ position:fixed; height:100%; width:100%; top:0px; background:rgba(0,0,0,0.5); } </style> </head> <body> 容器全屏了吧？ <div></div> </body> </html>
提示：您可以先修改部分代码再运行

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

css全屏，div容器全屏显示

猜你喜欢