让底部DIV在未满屏下始终居底部

实现底部元素固定

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

原创最新推荐文章于 2024-03-08 09:58:24 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #javascript #css

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍两种方法实现网页底部元素的固定显示：一是使用JavaScript动态调整元素位置；二是通过CSS设置固定定位。这两种方法确保底部元素始终处于屏幕底部，提供更好的用户体验。

方法一：（js来完成，让底部的ID的值与括号“bottom”一样。）

var bottom = document.getElementById("bottom");
if((infoHeight + bottomHeight) < allHeight){
bottom.style.position = "absolute";
bottom.style.bottom = "0";
}else{
bottom.style.position = "";
bottom.style.bottom = "";
}

setTimeout(function(){test();},10);
}
test();
</script>

方法二：（css来完成）

div { style="background:#ededed;height:31px;width:100%;position:fixed;left:auto;right:auto;bottom:0;_position:absolute;_top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight);text-align:center;"}