动态贴合页脚

本文介绍了动态贴合页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 当我的页面内容高度小于视口高度时，我想要适合我的页面底部视图端口。如果它超过它应该低于该内容。 我检查了视口的高度并改变了它。但在某些情况下它不起作用。 var vpHeight = getViewPort （）。高度; var contentHeight = $（ #contentWrapper ）高度（）; if （contentHeight< vpHeight）{ $（ ＃footer）。css（ position， 绝对）; $（ ＃footer）。css（ bottom， 0 ）; $（ ＃goToTop）。hide（）; } else { $（ ＃footer）。css（ position， static）; $（ ＃footer）。css（ bottom， auto ）; $（ ＃goToTop）。show（）; } function getViewPort（）{ var e = window ，a = ' inner'; if （！（' innerWidth' window ））{a = ' client'; e = document .documentElement || document .body; } return {width：e [a + ' Width']，height：e [a + ' Height ']} }; 解决方案 （ ＃contentWrapper）。height（）; if （contentHeight< vpHeight）{ （ ＃footer）。css（ position， 绝对）; （ ＃footer）。css（ bottom， 0 ）; Hi I want fit my page footer bottom of the view port when my page content height lesser than height of view port. If it exceeds it should go below that content.i have checked height of the view port and changed that. But on some scenarios it's not working. var vpHeight = getViewPort().height;var contentHeight = $("#contentWrapper").height();if (contentHeight < vpHeight) { $("#footer").css("position", "absolute"); $("#footer").css("bottom", "0"); $("#goToTop").hide();}else { $("#footer").css("position", "static"); $("#footer").css("bottom", "auto"); $("#goToTop").show();}function getViewPort() { var e = window, a = 'inner'; if (!('innerWidth' in window)) { a = 'client'; e = document.documentElement || document.body; } return { width: e[a + 'Width'], height: e[a + 'Height'] }}; 解决方案 ("#contentWrapper").height();if (contentHeight < vpHeight) {("#footer").css("position", "absolute");("#footer").css("bottom", "0"); 这篇关于动态贴合页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！