Egret div高度随浏览器自适应

最新推荐文章于 2024-03-10 10:13:54 发布

原创最新推荐文章于 2024-03-10 10:13:54 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现DIV元素自适应高度调整的方法。通过监听浏览器窗口大小的变化，动态调整指定ID的DIV元素的高度，使其随窗口宽度按比例变化。

在index.html里,先给<div>加一个id,这里设置id为divMain

<body>
    <div id="divMain" style="margin: auto;width: 100%;height: 450%;" class="egret-player" ></div>
	<script>
	//浏览器窗口发生变化时同时变化DIV高度
    window.onresize = autodivheight; 
    autodivheight();
    function autodivheight() { //函数：获取尺寸
        // 窗口发生变化时回到顶部
        window.scrollTo(0, 0);
        // 舞台宽高
        let stageWidth = 1920;
        let stageHight = 4285;
        //DIV高度随浏览器宽度变化
        document.getElementById("divMain").style.height = document.documentElement.clientWidth / stageWidth * stageHight + "px";
    }
	</script>
</body>