方法一，利用flex
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .outer{ 13 height: 500px; 14 width: 500px; 15 border: 2px red solid; 16 display: flex; 17 flex-direction: column; 18 } 19 20 .top{ 21 height: 100px; 22 width: 100%; 23 background-color: black; 24 /* 没有生长素 */ 25 flex: none; 26 } 27 28 .bottom{ 29 width: 100%; 30 background-color: #0000FF; 31 flex: auto; 32 } 33 34 </style> 35 36 </head> 37 <body> 38 <div class="outer"> 39 <div class="top"></div> 40 <div class="bottom"></div> 41 </div> 42 </body> 43 </html>
二，利用定位
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .outer{ 13 height: 500px; 14 width: 500px; 15 border: 2px red solid; 16 position: relative; 17 } 18 19 .top{ 20 height: 100px; 21 width: 100%; 22 background-color: black; 23 24 } 25 26 .bottom{ 27 width: 100%; 28 background-color: #0000FF; 29 position: absolute; 30 top: 100px; 31 left: 0; 32 right: 0; 33 bottom: 0; 34 35 } 36 37 </style> 38 39 </head> 40 <body> 41 <div class="outer"> 42 <div class="top"></div> 43 <div class="bottom"></div> 44 </div> 45 </body> 46 </html>