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

本文介绍了一种使用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;
        }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值