页面布局方案-上下固定，中间自适应

上下固定，中间自适应

三行布局， 上下固定，中间自适应

效果：

 

代码：

 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:50px 0px; /*上下设置为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{margin:0; height: 100%;}
15         .top{
16             width:100%;
17             height:50px; /*值为padding的高度*/
18             margin-top: -50px;  /*值为padding的高度*/
19             background-color: #ff6600;
20             overflow: auto;
21             position:relative;
22         }
23         .main{
24             width:100%;
25             height: 100%;
26             overflow: auto;
27             background-color: #FFE69F;
28         }
29         .bottom{
30             width:100%;
31             height:50px;  /*值为padding的高度*/
32             overflow: auto;
33             background-color:#ff6600;
34         }
35     </style>
36 </head>
37 <body>
38 
39 <div class="top">
40     <p> 此布局仅适用于在body内布局 top 高度50px </p>
41 </div>
42 
43 <div class="main">
44     <p> 此布局仅适用于在body内布局 中间高度自适应 </p>
45 </div>
46 
47 <div class="bottom">
48     <p> 此布局仅适用于在body内布局 bottom 高度50px </p>
49 </div>
50 
51 </body>
52 </html>

 

posted @ 2018-02-10 21:23  RyanChan  阅读(396)  评论(0)  编辑  收藏  举报