<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，就会导致错误。
这个是原来的样式，这个就不解释了。
时间： 2024-10-10 04:16:56