HTML5的div自适应高度和宽度

最新推荐文章于 2023-10-26 17:57:56 发布

运妙心藏

最新推荐文章于 2023-10-26 17:57:56 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 div 自适应高度和宽度

本文链接：https://blog.youkuaiyun.com/u010921682/article/details/97022223

HTML5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种通过JavaScript动态调整div元素尺寸的方法，以此达到移除页面滚动条的效果。但存在局限性，即当窗口大小变化时需手动刷新页面。建议增加窗口大小监听事件以改善用户体验。

代码:

<div id="page-wrapper" class="gray-bg" style="border: 2px solid #00CC00">

</div>

<script>
    function myFunction() {
        var cliWidth = document.body.clientWidth;
        var cliHeigth = document.body.clientHeight;
        var divWidth = cliWidth;
        var divHeight = cliHeigth;
        $('#page-wrapper').css("width", divWidth+"px");
        $('#page-wrapper').css("height", divHeight+"px");
    }
    myFunction();

</script>