动态贴合页脚 [英] Dynamically fit footer

问题描述

当我的页面内容高度小于视口高度时，我想要适合我的页面底部视图端口。如果它超过它应该低于该内容。



我检查了视口的高度并改变了它。但在某些情况下它不起作用。

  var  vpHeight = getViewPort （）。高度; 
  var  contentHeight = $（  #contentWrapper ）高度（）; 
 
  if （contentHeight< vpHeight）{
 $（ ＃footer）。css（  position， 绝对）; 
 $（ ＃footer）。css（  bottom，  0 ）; 
 $（ ＃goToTop）。hide（）; 
} 
  else  {
 $（ ＃footer）。css（  position，< span class =code-string>  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");

这篇关于动态贴合页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！