<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>绝对定位</title> <style> body { margin: 0; 100%; } header, footer { position: absolute; top: 0px; background: red; height: 100%; } header { left: 0; 100px; } footer { right: 0px; 200px; } section { margin: 0px 100px 200px 0px; height: 100%; background: blue; } </style> </head> <body> <header>Left</header> <section>Main</section> <footer>Right</footer> </body> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圣杯布局</title> <style> html { height: 100%; padding: 0; margin: 0 } body { padding-left: 100px; padding-right: 200px; } header { background: red; 100px; float: left; margin-left: -100%; position: relative; left: -100px; height: 100%; } footer { background: red; 200px; height: 100%; float: left; margin-left: -200px; position: relative; right: -200px; } section { background: blue; 100%; height: 100%; float: left; } </style> </head> <body> <header>Left</header> <section>Main</section> <footer>Right</footer> </body> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双飞翼布局</title> <style> html { height: 100%; padding: 0; margin: 0 } body { padding-left: 100px; padding-right: 200px; } header { background: red; 100px; float: left; margin-left: -100%; position: relative; left: -100px; height: 100%; } footer { background: red; 200px; height: 100%; float: left; margin-left: -200px; position: relative; right: -200px; } section { background: blue; 100%; height: 100%; float: left; } </style> </head> <body> <header>Left</header> <section>Main</section> <footer>Right</footer> </body> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动布局</title> <style> html, body { height: 100%; padding: 0; margin: 0 } header { background: red; width: 100px; float: left; height: 100%; } footer { background: red; width: 200px; float: right; height: 100%; } section { background: blue; height: 100%; margin: 0px 100px 200px 0px; } </style> </head> <body> <header>Left</header> <footer>Right</footer> <section>Main</section> </body> </html>