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

<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>


技术分享

↑ 这是在火狐里看到的效果,分辨率:279*340

↓ 下面这个是滚动条滚到最下面的效果

技术分享

技术分享

↑ 这个是在火狐里浏览,分辨率为:285*528

技术分享

这是JS更改的效果,可以看的出来获取到网页浏览的大小其实是获取滚动条的大小,如果你获取document.body.clientHeight,当分辨率过低的时候就会获取到0,就会导致错误。

技术分享

这个是原来的样式,这个就不解释了。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。