首页 > 代码库 > jQuery动态定位
jQuery动态定位
关于页面布局这个问题，一直很纠结，之前一直不知道如何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>
jQuery动态定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。