页脚js控制在底部显示
当内容不够无法撑开页面时,需要将尾部一直固定在页面底部,JS实现页脚在浏览器可视范围内始终置底。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 $(window).bind("load", function() { 3 var footerHeight = 0; 4 var footerTop = 0; 5 positionFooter(); 6 function positionFooter() { 7 // 获取页脚的高度 8 footerHeight = $(".footWrap").height(); 9 // 获取页脚的高度 10 /* 11 scrollTop() 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 12 */ 13 footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; 14 //如果页面内容高度小于屏幕高度,div#footer将绝对定位到屏幕底部,否则div#footer保留它的正常静态定位 15 if(($(document.body).height()+footerHeight) < $(window).height()) { 16 $(".footWrap").css({ position: "absolute",left:"0" }).stop().css({top:footerTop}); 17 } 18 } 19 $(window).scroll(positionFooter).resize(positionFooter); 20 }); 21 </script>
有两处$(".footWrap"),需要将页脚的类样式名称footWrap修改成需要的名称即可,还要引入jquery文件。如
<script src="/static/plugins/jquery-3.3.1.js"></script>