页面布局方案-上固定,下自适应

上固定,下自适应

两行布局,上固定,下自适应

效果:

 

代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>上边固定,下面自适应</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <style type="text/css">
 7         html{
 8             padding-top:50px;  /*上部设置为50px*/
 9             -webkit-box-sizing: border-box;
10             -moz-box-sizing: border-box;
11             box-sizing: border-box;
12             overflow:hidden;
13         }
14         html,body{
15             margin:0;
16             height: 100%;
17             width:100%;
18         }
19         .top{
20             width:100%;
21             height:50px;  /*高度和padding设置一样*/
22             margin-top: -50px; /*值和padding设置一样*/
23             background-color: #ff6600;
24             overflow: auto;
25             position:relative;
26         }
27         .main{
28             height: 100%;
29             width:100%;
30             overflow: auto;
31             background-color: #FFE69F;
32         }
33     </style>
34 </head>
35 <body>
36 <div class="top">
37    <p> 此布局仅适用于在body内布局 top 高度50px </p>
38 </div>
39 
40 <div class="main">
41   <h3>下面自适应,此布局仅适用于在body内布局,main 高度自适应  </h3>
42 </div>
43 </body>
44 </html>

 

posted @ 2018-02-08 10:22  RyanChan  阅读(406)  评论(0编辑  收藏  举报