JS控制页面底部内容自适应

最新推荐文章于 2024-01-17 07:11:38 发布

原创最新推荐文章于 2024-01-17 07:11:38 发布 · 652 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript和CSS实现的自适应底部布局方案。该方案可根据页面内容的多少自动调整，确保底部元素在内容不足时固定在屏幕底部，而在内容较多时自然显示在页面底部。通过监听窗口大小变化事件，动态调整底部元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天要实现的效果是，当页面内容不足以充满屏幕窗口时，把底部固定在屏幕最下面；而当页面内容比较多时使其在页面的底部显示。

1.body内容

<div>
        正文内容
    </div>
    
    <div id="footer">
        底部内容
    </div>

2.js代码

$(function(){
            //窗体改变大小事件
            $(window).resize(function(){
                //正文高度
                var body_height = $(document.body).outerHeight(true);
                //底部元素高度
                var bottom_height = $("#footer").outerHeight(true);
                //浏览器页面高度
                var window_height = $(window).height();
                //判断并调整底部元素的样式
                if($("#footer").hasClass('page-bottom')){
                    //若包含有page-bottom类，就应用了position设置
                    //当position为absolute时，body高度不包含这个元素
                    //所以页面高度需要判断body和footer之和若小于浏览器窗口
                    //则移除样式，让footer自然跟随在正文后面
                    if(body_height + bottom_height >= window_height){
                        $("#footer").removeClass('page-bottom');
                    }
                }else{
                    //若没有page-bottom类，body高度包含footer
                    //判断body高度小于浏览器时，则悬浮于底部
                    if(body_height < window_height){
                        $("#footer").addClass('page-bottom');
                    }
                }
            });

            //页面加载时，模拟触发一下resize事件
            $(window).trigger('resize');
        });

3.最后还有一个css样式

.page-bottom{
            position:absolute;  /*或者fixed*/
            bottom:0;
        }