用js计算主体内容的高度—让导航栏始终在底部，在输入法出现的时候

移动端最常见的就是顶部和底部的工具栏，如果用定位的方式实现将工具栏固定在顶部或底部，在使用输入法的时候会出现如下现象：

那么问题来了，如何让导航栏始终在底部，在输入法出现的时候也不被挤上来呢？
现在我们就搞一下：

html代码如下:

<header class="header">头部</header>
<div class="container">
    <div class="box"></div>
</div>
<footer class="footer">尾部</header>

css代码如下：

<style>
    *{
        padding:0;
        margin:0;
    }
    header,.container,footer{
        text-align: center;
        color:#fff;
    }
    header{
        background: #ff8800;
        height:50px;
        line-height: 50px;
    }
    .container{
        background: #ddd;
        color:#333;
        overflow: auto;
    }
    .box{
        width:100%;
        height:2000px;
    }
    footer{
        background: #666;
        height:45px;
        line-height: 45px;
    }
</style>

js代码如下:

<script>
var windowH;
var headerH;
var footerH;
var containerH;

$(function(){
    function styleHeight(){
        windowH = $(window).height();   // 获取整个浏览器的高度
        headerH = $('.header').height();// 获取header的高度
        footerH = $('.footer').height();// 获取footer的高度
        containerH = windowH-headerH-footerH;
        $('.container').height(containerH);// 将中间主体的高度动态赋值
    }

    styleHeight();  // 页面加载先执行这个函数

    // 屏幕大小变化时，也执行这个函数
    $(window).on('resize',function () {
        styleHeight();
    });
})
</script>

点击下载 demo