HTML - 根据分辨率让网页地步不留空

时间：2015-03-20 18:38:57 阅读：180 评论：0 收藏：0 [点我收藏+]

<html>

	<head>
		<title></title>
		<style type="text/css">
			html, body{
				margin:0;
				padding:0;
			}
			.top{
				width:100%;
				height:36px;
				background-color: #ff0000;
				z-index:9999;
			}
			.bottom{
				width:100%;
				height: 36px;
				margin-top:52px;
				background-color: #0000ff;
				float:left;
				border-top:2px solid black;
				position:relative;
				bottom:0;
			}
			.centerHeight{
				width:100%;
				height:60px;
				background-color: #00ff00;
				float:left;
				margin-top:60px;
				border-top:2px solid black;
			}
			.topMargin{
				margin-top:36px;
			}
			.bottomMargin{
				border-bottom:2px solid black;
			}
		</style>
	</head>

	<body>
		<div id="topDiv" class="top"><div>
		
		<div id="centerDiv" class="centerHeight topMargin"><div>
		<div id="centerDiv" class="centerHeight"><div>
		<div id="centerDiv" class="centerHeight"><div>
		<div id="centerDiv" class="centerHeight"><div>
		<div id="centerDiv" class="centerHeight"><div>
		<div id="centerDiv" class="centerHeight bottomMargin"><div>
		
		<div id="buttomDiv" class="bottom"><div>
		
		<script>
        
        var BodyHeight = document.body.scrollHeight;
        var ClientHeight = window.screen.height;

        if (BodyHeight <= ClientHeight) {
            document.getElementById("buttomDiv").style.position = 'absolute';
            document.getElementById("buttomDiv").style.bottom = '0px';
            document.getElementById("buttomDiv").style.width = '100%';
        }
		
		</script>
	</body>

</html>

技术分享