jQuery动态定位

浏览数：45 / 时间：2015年06月09日

关于页面布局这个问题，一直很纠结，之前一直不知道如何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>