HTML - 根据分辨率让网页底部不留空_网页页面底部不留空白-优快云博客

本文链接：https://blog.youkuaiyun.com/imwangjiping/article/details/44494983

这篇博客探讨了在不同分辨率下，特别是在火狐浏览器中，如何利用JavaScript解决网页底部留空的问题。作者指出，当分辨率较低时，通过document.body.clientHeight获取的页面高度可能为0，从而引发错误。文章通过实例展示了JS如何调整页面样式，以确保在各种分辨率下，滚动到页面底部时无空白区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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