移动端-内页-内容高度不够时的2种解决方法

方法一：判断window和html的高度添加定位

// 获取window的高度
    var winH = $(window).height();
    // 获取logo的高度
    var htmlH = $('html').height();
    // console.log(winH,htmlH);
    if( winH > htmlH ) {
        $('html,body').css({'height':'100%','overflow':'hidden'});
        $('footer').css({'position':'absolute','bottom':'0','left':'0'});
    }

方法二：判断window和html的高度，给内容部分添加最小高度

// 获取window的高度
    var winH = $(window).height();
    // 获取html的高度
    var htmlH = $('html').height();
    // 获取顶部的高度
    var headH = $('.headbox').outerHeight();
    // 获取尾部的高度
    var footH = $('footer').outerHeight();
    // 差
    var difference = winH - headH - footH;
 
    if( winH > htmlH ) {
        $('.pagesContent').css('min-height',difference);
    }

扩展知识

// jQuery获取元素高度
$("#divId").height(); //不包括内边距、边框或外边距
$("#divId").innerHeight();//包括内边距
$("#divId").outerHeight();//包括内边距和边框

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin