footer 部分定位的问题

Question

如图 页面主要分为两个部分
上面是一个tab选项卡
选项卡的右边是内容区 我点击左边的第几个导航 对应的第几个item就显示

<div class="wrapper">
    <!--导航-->
    <ul>
        <li class="nav_item"><a href="">导航1</a></li>
        <li class="nav_item"><a href="">导航2</a></li>
        <li class="nav_item"><a href="">导航3</a></li>
        <li class="nav_item"><a href="">导航4</a></li>
    </ul>
    
    <!--内容-->
    <div>
        <div class="item"></item>
        <div class="item"></item>
        <div class="item"></item>
        <div class="item"></item>
    </div>
</div>

下面是footer

因为我的wrapper完全是靠导航的高度 或者 内容区item撑起来的

当wrapper的高度很低的时候，footer就可能会离开窗口底部太远。 这时可以用absolute定位到底部

但是当wrapper的高度很高时， footer定位到底部就不好了， 这时需要用relative

针对以上 我用了js判断 body的clientHeight 和 scrollHeight, 代码如下

var $in_h = document.documentElement.clientHeight;
var $sc_h = document.body.scrollHeight;

var dif   = $sc_h - $in_h;

var mdif  = Math.abs(dif);


// 当实际内容 小于 屏幕高度 把footer定在底部
if(dif < 0) {
    $('.footer').css({
        'position': 'absolute',
        'bottom'  : '0'
    })
} 

if(dif > 0){
    $('.footer').css({
        'position': 'relative',
        'bottom'  : 0
    })
}

但是在个别界面还是会失去效果 这里应该有一个临界点。 大家平时会怎么做？？？

Answer 1

可以参考一下Sticky footers

Answer 2

判断页面内容是否超过一屏
超过一屏，正常布局放在最下面
不超过一屏使用absolute定位在最下面

Answer 3

获取wapper+footer的高度和跟屏幕高度比较，如果大于屏幕高度就relative，如果小于屏幕高度就absolute