一、flex布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body,html{ 8 height:100%; 9 } 10 .box{ 11 display: flex; 12 flex-direction: column;/*垂直方向排列*/ 13 height: 100%;/*全屏*/ 14 } 15 .top{ 16 height: 100px; 17 background: red; 18 } 19 .center{ 20 flex: 1; 21 background: pink; 22 } 23 .bottom{ 24 height: 100px; 25 background: green; 26 } 27 28 </style> 29 </head> 30 <body> 31 <div class="box"> 32 <div class="top"></div> 33 <div class="center"></div> 34 <div class="bottom"></div> 35 </div> 36 </body> 37 </html>
二、定位布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body,html{ 8 height:100%; 9 } 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 .box{ 15 position: relative;/*display: flex;*/ 16 top:0; 17 left: 0; 18 /*flex-direction: column;!*垂直方向排列*!*/ 19 height: 100%;/*全屏*/ 20 } 21 .top{ 22 position: absolute; 23 width:100%; 24 top:0; 25 left: 0; 26 height: 100px; 27 background: red; 28 /*margin-bottom: 100px;*/ 29 } 30 .center{ 31 position: absolute; 32 width:100%; 33 bottom:100px; 34 top:100px; 35 36 background: blue; 37 } 38 .bottom{ 39 /*margin-top: 100px;*/ 40 position: absolute; 41 width:100%; 42 bottom:0; 43 left: 0; 44 height: 100px; 45 background: green; 46 } 47 48 </style> 49 </head> 50 <body> 51 <div class="box"> 52 <div class="top"></div> 53 <div class="center"></div> 54 <div class="bottom"></div> 55 </div> 56 </body> 57 </html>
效果：
