JS让div固定在页面底端怎么做
内容摘要
这篇文章主要为大家详细介绍了JS 让div固定在页面底端的简单示例,具有一定的参考价值,可以用来参考一下。
文章正文
这篇文章主要为大家详细介绍了JS 让div固定在页面底端的简单示例,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记。JS代码如下:
/**
* 让div固定在页面底端
*
* @param
* @arrange (www.idcnote.com)
**/
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
var s = "";
for (var i = 0; i < 100; i++) {
s += "<div>這里是內容,很高</div>";
}
s += "<div>END</div>"
$("#container").html(s);
function my_resize() {
$("#container").height($("#right").height() - $("#copyright").outerHeight(true));
};
my_resize();
$(window).resize(function() {
my_resize();
})
});
</script>
CSS代码如下:
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
#right {
height: 100%;
position: relative;
background-color: Yellow;
}
#copyright {
height: 20px;
width: 100%;
background-color: Gray;
}
#container {
height: 2000px;
overflow-x: hidden;
overflow-y: auto;
}
html代码如下:
<div id="left"></div>
<div id="right">
<div id="container">
</div>
<div id="copyright">Copyright © 1999-2009, Michael Zhou, All Rights Reserved</div>
</div>
注:关于JS 让div固定在页面底端的简单示例的内容就先介绍到这里,更多相关文章的可以留意
代码注释