页脚保持在未满屏页面的底部

最近有这样一个需求，就是说在页面内容不够丰富的情况下，我们得让页脚始终保持在页面的底部。

bala,bala。。。

在网上寻觅了一下，最终还是赏识用js解决的这款。

不闲扯，贴码show

html部分

<body>
<div id="top">top</div>
<div id="bottom">bottom</div>
</body>

css部分

*{
    margin:0;
    padding:0;
}
#top{
    background:#33CCFF;
    text-align:center;
}
#bottom{
    background:#FFCC00;
    text-align:center;
    width:100%;
}

javascript部分

function calcDistance(){
    var topHeight = document.getElementById("top").scrollHeight;
    var bottomHeight = document.getElementById("bottom").scrollHeight;
    var allHeight = document.documentElement.clientHeight;
    var bottom = document.getElementById("bottom");
        if((topHeight + bottomHeight) < allHeight){
        bottom.style.position = "absolute";
        bottom.style.bottom = "0";
        }else{
        bottom.style.position = "";
        bottom.style.bottom = "";
        }
    setTimeout(function(){calcDistance();},10);
}