一个简单页面布局模板 

 1 <!doctype html>
 2 <html>
 3     <head>
 4     <style type="text/css">
 5     *{
 6         border:0px;
 7         margin:0px;
 8         overflow-x: hidden;
 9     }
10     .header
11     {
12         height: 80px;
13         background: #171717 url("__IMG__/header_bg.png") top left no-repeat;
14     }
15     #navbarmenu
16     {
17         border: 0px solid red;
18         height: 36px;
19         margin: 0;
20         padding: 0 0 0 25px;
21         width: 100%;
22           background:  url("__IMG__/navbar.png") center center repeat-x;
23     }
24     #navbarmenu li
25     {
26         border: 0px solid red;
27         list-style: none;
28         float: left;
29         font-size: 13px;
30         font-weight: bold;
31         line-height: 32px;
32     }
33     #navbarmenu li a
34     {
35         display: block;
36         padding: 2px 11px;
37         background: white url("__IMG__/navbar.png") center center repeat-x;
38         text-align: center;
39         text-decoration: none;
40         color: white;
41     }
42     .content{
43         border: 0px solid red;    
44     }
45     .footer{
46         position:absolute; 
47         bottom:0; 
48         position:fixed;
49         text-align:center;
50         width:100%;
51         height: 24px;
52         background-color:#efefef; 
53         border-top:1px solid #CCC; 
54     }
55     .footer span{
56         font-size: 12px;
57           color: #777777;
58     }
59     </style>
60     </head>
61     <body>
62         <div id="header" class="header">
63             
64         </div>
65         <div id="navigation" class="navigation">
66             <ul id="navbarmenu">
67                 <li><a>系统</a></li>
68                 <li><a href="">配置管理</a></li>
69                 <li><a href="">状态管理</a></li>
70                 <li><a href="">集群管理</a></li>
71                 <li><a href="">其他管理</a></li>
72                 <li><a href="">帮助</a></li>
73             </ul>
74             <div style="clear:both"></div>
75         </div>
76         <div id="content" class="content">
77             <iframe scrolling="auto" frameborder="0" src="" style="width:100%;height:99.5%;"></iframe>
78         </div>
79         <div id="footer" class="footer">
80             <span>Platform:&nbsp;WEB网管系统&nbsp;v2.1.3740 &copy; 2015 All Rights Reserved. </span>
81         </div>
82         <script type="text/javascript">
83             var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
84 
85             //window.screen.height;//分辨率
86             var height_header = window.document.getElementById('header').offsetHeight;
87             var height_navbar = window.document.getElementById('navigation').offsetHeight;
88             var height_footer = window.document.getElementById('footer').offsetHeight;
89             //alert(height);
90             //alert(height-height_header-height_navbar-height_footer);
91             document.getElementById('content').style.height =   (height-height_header-height_navbar-height_footer)+"px";
92         </script>
93     </body>
94 </html>
View Code

 

posted @ 2016-08-25 16:14  geek0202  阅读(122)  评论(0)    收藏  举报