一般典型的页面布局分为头部header、内容体content、底部footer,头部和footer为通用的，内容content可以放置不同类型的文档内容。
典型的页面html结构如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>测试页面</title> </head> <body> <div class="main"> <div id="header">头部</div> <div id="content">内容区</div> <div id="foot">底部</div> </div> </body> </html>
主要css定义文件如下
html,body { margin: 0; padding:0; height: 100%; } .main { min-height:100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ position: relative; } #header { padding: 10px; height: 50px; background-color: #30303B; line-height: 66px; } #content { position: relative; padding-top: 108px; width: 1000px; margin: 0 auto; padding-bottom: 64px;/*等于footer的高度*/ } #foot { position: absolute; bottom: 0; width: 100%; height: 64px;/*脚部的高度*/ background: #6cf; clear:both; }
这样就可以看到一个典型的布局页面了
鉴于目前前端主要使用单页面应用的方式进行开发，采用模块化思维，其实基本原理是一致的。主要是将头部header和底部footer提取成单独的组件即可。样式同样可以借鉴上面书写的样式。