1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 body, h1{padding: 0;margin: 0;} 10 header{width: 100%;height: 100px;background-color: green;} 11 footer{width: 100%; height: 100px;background-color: darkslategray;} 12 .left,.right,.center{float: left; height: 500px;} 13 .left,.right{ position: relative; width: 200px;} 14 .container{ 15 overflow: hidden; 16 padding: 0 200px; 17 } 18 .center{ 19 background-color: greenyellow; 20 width: 100%; 21 } 22 .right{ 23 background-color: #3a9; 24 right: -200px; 25 margin-left: -200px; 26 } 27 .left{ 28 background-color: #f00; 29 left: -200px; 30 margin-left: -100%; 31 } 32 </style> 33 </head> 34 <body> 35 <header><h1>header</h1></header> 36 <div class="container"> 37 <div class="center">center</div> 38 <div class="left">left</div> 39 <div class="right">right</div> 40 </div> 41 <footer><h1>footer</h1></footer>
42 </body>
43 </html>