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

当前位置 : 首页 > 网页制作 > html5 > HTML - 根据分辨率让网页地步不留空

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

来源: 作者: 时间:2016-01-30 08:53
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;



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


\

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

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

\

\

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

\

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

\

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

Tag:
网友评论

<