关于页面布局这个问题，一直很纠结，之前一直不知道如何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>
时间： 2025-01-02 18:34:14