footer始终显示在页面最底部

最新推荐文章于 2024-08-23 09:58:09 发布

牛巨侠

最新推荐文章于 2024-08-23 09:58:09 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： footer 页面底部定位

本文链接：https://blog.csdn.net/weixin_43705559/article/details/89638213

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

当body的高度大于视口高度时，footer在body的最底部。
当body的高度小于视口高度时，footer脱离文档流，使用固定定位保持在视口的底部。
实现起来太简单了，直接上代码：

JS代码：

// footer 始终在页面最底部
var foot, windowH, bodyH
foot = document.getElementsByTagName('footer')[0];
function footer() {
    windowH = document.documentElement.clientHeight;
    bodyH = document.body.offsetHeight;
    bodyH < windowH ? (foot.style.position = 'fixed', foot.style.bottom = '0') : (foot.style.position = '');
};
footer();
window.onresize = function () { footer(); }