让一个div固定在页面底端

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>div居底</title>
	<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>
	<style type="text/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;
		}
	</style>
</head>
<body>
    <div id="left"></div>
    <div id="right">
        <div id="container">
        </div>
        <div id="copyright">Copyright &copy; 1999-2009, Michael Zhou, All Rights Reserved</div>
    </div>
</body>
</html>

发表评论