- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 头部,尾部高度固定,中间自适应布局
- </title>
- <style>
- * { padding: 0;margin: 0;} header { width: 100%; height: 60px; background:
- #cccccc;} main { width: 100%; background: #2b669a;position: absolute;top:
- 60px;bottom: 60px;} footer {width: 100%;height:60px;background: #9f1c24;
- position: absolute;bottom: 0;}
- </style>
- </head>
- <body>
- <header>
- </header>
- <main>
- This is main!
- </main>
- <footer>
- </footer>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-1985760.html