做了一个最精简模型,看着更容易理解些
如题,如题
如题,如题
2016-07-30
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>绝对定位整体布局</title> <style type="text/css"> body { margin: 0; } html, body, .page { width: 100%; height: 100%; overflow: hidden; } .page { position: absolute; left: 0; top: 0; } .header, .footer, .content { position: absolute; left: 0; right: 0; } .header { top: 0; height: 45px; background-color: blue; } .content { top: 45px; bottom: 50px; background-color: gray; } .footer { bottom: 0; height: 50px; background-color: blue; } </style> </head> <body> <div class="page"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div> </div> </body> </html>
举报