上下固定，中间自适应
三行布局， 上下固定，中间自适应
效果：
代码：
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>