代码改变世界

透明层无论滚动与否都满屏显示(纯css)

2012-09-07 15:46  江苏黑马  阅读(310)  评论(0)    收藏  举报 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
 7 
 8         <title>text</title>
 9         <style type="text/css">
10             * html, body {/*inherit*/
11                 height: 100%;
12                 width:100%;
13                 overflow: hidden;
14             }
15             #div00 {/*layer*/
16                 position: absolute;
17                 z-index: 99;
18                 background: #000;
19                 opacity: 0.3;
20                 filter: alpha(opacity=30);
21                 top: 0;
22                 left: 0;
23                 height: 100%;
24                 width: 100%;
25             }
26             #div0 {/*parent*/
27                 height: 100%;
28                 overflow: scroll;
29                 position: absolute;
30                 left: 0;
31                 right: 0;
32                 z-index: 999;
33             }
34             #div1 {/*child*/
35                 width: 200px;
36                 height: 2000px;
37                 background-color: #0ff;
38             }
39         </style>
40     </head>
41 
42     <body>
43         <div id="div0">
44             <div id="div1">
45                 asdfasdfasd
46             </div>
47         </div>
48         <div id="div00"></div>
49     </body>
50 </html>