标签：style blog http io ar color os sp java
关于页面布局这个问题，一直很纠结，之前一直不知道如何footer定位，后来想了想用jQuery就可以实现这些功能于是自己花了点时间弄了一个页面，可以动态设置根据#header的高度动态设置#main和#footer的位置。
css
body,html{ margin: 0; padding: 0; border: 0; height: 100%; } #container{ min-width: 100%; min-height: 100%; position: relative; margin: 0; } #header{ width: 100%; height: 150px; background: #f0f; position: absolute; margin: 0; } #main{ width: 100%; height: 700px; background: #f00; position: absolute; margin-top: 150px; } #footer{ width: 100%; height: 50px; background: #0f0; position: absolute; }
思路：一、设置一个#container包裹#header、#main、#footer
二、首先要给 html 和 body 元素设置高度（height属性）为100%，这样先保证根元素的高度撑满整个浏览器窗口，然后下面才能使 #container 的高度撑满整个浏览器窗口。至于为什么用同时设置 html 和 body 元素，是因为 Firefox 和 IE 认为的根元素不一样，因此这里都给他们设置上。
三、设置#container为相对定位，
将 #container 设置为相对定位（第9行），目的是使他成为它里面的 #footer 的定位基准，也就是所谓的“最近的定位过的祖先元素”。然后把 #foooter 设置为绝对定位并使之贴在 #container 的最下端。设置min-height为100%。min-height 属性的作用就是使 #container 的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。
四、设置#header的值，然后根据#header的height值设置#main的margin-top的值。这样可以设置两个div的距离为0，然后用jQuery动态获取#header的值和#main的值然后将#footer的margin-top值设置为#main和#header的高度的和
这样就可以将footer定位在最下方了。
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>头部</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="resource/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="resource/css/common.css"> <script src="resource/js/jquery-2.1.1.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="resource/js/bootstrap.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div id="container"> <div id="header">header</div> <div id="main">content</div> <div id="footer">footer</div> </div> <script type="text/javascript"> $(function(){ var a=$("#main").height()+$("#header").height(); var marginTop=a+‘px‘; $("#footer").css("margin-top",marginTop); }); </script> </body> </html>
标签：style blog http io ar color os sp java
原文地址：http://www.cnblogs.com/JAYIT/p/4131129.html
