如何让一个元素自适应屏幕的高度

最新推荐文章于 2024-01-11 12:21:54 发布

原创最新推荐文章于 2024-01-11 12:21:54 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

本文介绍了一个简单的JavaScript函数，用于使页面元素的高度与浏览器窗口高度保持一致，并随窗口大小调整而变化。

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

让一个元素的高度和屏幕的高度一样，并且随着屏幕高度的变化而变化，用js代码实现；记得写完调用这个函数；

        //====tree的自适应高度start=====================

            function autodivheight(){ //函数：获取尺寸  


                //获取浏览器窗口高度  
                var winHeight=0;
                if (window.innerHeight)
                    winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                    winHeight = document.body.clientHeight;
                //通过深入Document内部对body进行检测，获取浏览器窗口高度  
                if (document.documentElement && document.documentElement.clientHeight)
                    winHeight = document.documentElement.clientHeight;
                //DIV高度为浏览器窗口的高度  
                document.getElementById("tree").style.height= winHeight +"px";

                //当tree的高度超过屏幕高度的时候，设置滚动条
                $("#tree").height() < winHeight  ? $("#tree").height('auto') : $("#tree").css('overflow', 'auto').height(winHeight);

            }
        window.onresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度  

        //====tree的自适应高度end=======================


欢迎关注我的个人技术公众号！javascript艺术