（1）通过定位和浮动以及BFC的原理来实现
HTML
1 <body> 2 <div class="box"> 3 <header></header> 4 <section> 5 <!-- 重点是代码布局时遵循1、3、2的顺序 --> 6 <aside>1</aside> 7 <article>3</article> 8 <section>2</section> 9 </section> 10 <footer></footer> 11 </div> 12 </body>
CSS 通过position和float 实现想要的效果
1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6 } 7 html, 8 body { 9 height: 100%; 10 } 11 body { 12 background: #333; 13 } 14 .box { 15 width: 100%; 16 height: 100%; 19 position: relative; 20 } 21 .box>header { 22 height: 100px; 23 background: #fcc; 24 } 25 .box>section { 26 background: #0f0; 27 position: absolute; 28 top: 100px; 29 bottom: 100px; 30 width: 100%; 31 } 32 .box>footer { 33 height: 100px; 34 background: #fcc; 35 position: absolute; 36 bottom: 0; 37 left: 0; 38 width: 100%; 39 } 40 .box>section aside { 41 width: 200px; 42 height: 90%; 43 background: #0ff; 44 float: left; 45 } 46 .box>section article { 47 width: 200px; 48 height: 90%; 49 background: #0ff; 50 float: right; 51 } 52 .box>section section { 53 height: 100%; 54 background: #f0f; 55 overflow: hidden; 56 } 57 </style>
效果
