iframe高度

最新推荐文章于 2024-07-06 10:15:56 发布

原创最新推荐文章于 2024-07-06 10:15:56 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#window #js #css #html5 #javascript

这篇博客介绍了如何通过JavaScript实现网页布局，使得主页面不显示滚动条，而只在iframe内部保留滚动条。通过获取元素id并计算高度，动态调整iframe的高度以适应窗口大小变化，确保用户体验良好。

//主页面去除滚动条，仅iframe内有滚动条
            var menuFrame = document.getElementById('menuFrame');

            //赋予iframe初始高度
            menuFrame.height = window.innerHeight - document.getElementById('navHeader').offsetHeight - document.getElementById('navFooter').offsetHeight;

            //窗口大小变化时iframe高度随之变化
            window.addEventListener('resize', function () {
                menuFrame.height = window.innerHeight - document.getElementById('navHeader').offsetHeight - document.getElementById('navFooter').offsetHeight;
            });