一、自适应布局
1、头尾固定高度中间高度自适应布局：
(1) 绝对定位：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>头尾固定高度中间高度自适应布局</title> 6 <style> 7 html,body{ 8 margin:0;padding:0;height:100%; 9 } 10 .head{ 11 width:100%;height:45px;line-height:45px;background:#ccc;position:absolute;top:0;z-index:5;text-align:center; 12 } 13 .box{ 14 width:100%;background:orange;overflow:auto;position:absolute;top:45px;bottom:45px; 15 } 16 .foot{ 17 width:100%;height:45px;line-height:45px;background:#ccc;position:absolute;z-index:5;bottom:0;text-align:center; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="head">头部</div> 23 <div class="box"> 24 <div class="content">中间自适应部分<br> 25 <p>content1</p><p>content1</p><p>content1</p><p>content1</p><p>content1</p><p>content2</p><p>content2</p><p>content2</p><p>content2</p><p>content2</p><p>content3</p><p>content3</p><p>content3</p><p>content3</p><p>content3</p><p>content4</p><p>content4</p><p>content4</p><p>content4</p><p>content4</p><p>content5</p><p>content5</p><p>content5</p><p>content5</p><p>content5</p> 26 </div> 27 </div> 28 <div class="foot">尾部</div> 29 </body> 30 </html>