在窗口调整大小事件中，HTMLdiv高度保持增长-前端问题

HTML div height keeps growing on window resize event(在窗口调整大小事件中，HTMLdiv高度保持增长)

本文介绍了在窗口调整大小事件中，HTMLdiv高度保持增长的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个简单的Three.js场景(画布)，我想在窗口调整大小事件(特别是改变屏幕宽度，保持高度不变)时响应它。在正常情况下，我使用window.innerWidth，window.innerHeight属性来设置画布的大小以匹配窗口大小。

然而，我想在html中嵌入三个场景。所以我在<div id="three-container">中放了三个画布。

在下面的代码中，当我调整窗口大小时(仅限宽度)，画布的高度不断增加。窃听器在哪里？我错过了什么？

为了获得div容器的大小，我尝试了container.clientWidth、container.offsetWidth和$('#three-container').width()(和高度)，但对于所有情况，div的初始高度都是0，并且随着大小的调整不断增长。

完整代码清单：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>default</title>
        <link rel="icon" href="">

    </head>
    <body>
        <div id='three-container' class= "row"></div>

        <script src="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvdGhyZWUuanMvcjgzL3RocmVlLmpz"></script>
        <script>

            var renderer, scene, camera, cube;
            var time = 0.0;
            var container = window.document.getElementById( 'three-container' );
            var w = 100; //container.clientWidth; // container.offsetWidth
            var h = 100; //container.clientHeight; //  container.offsetHeight

            init();
            loop();

            function init() {

                camera = new THREE.PerspectiveCamera( 45, w / h, 1, 1000 );

                scene = new THREE.Scene();
                scene.add( camera );

                camera.position.z  = 16;

                renderer = new THREE.WebGLRenderer();
                renderer.setClearColor( 0xa696969 );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( w, h );

                container.appendChild( renderer.domElement );

                var geo = new THREE.BoxGeometry( 5, 5, 5);
                var mat = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true } );
                cube = new THREE.BoxHelper( new THREE.Mesh( geo, mat ), mat.color );
                scene.add( cube );

                window.addEventListener( 'resize', function onWindowResize() {
                    w = container.clientWidth; // container.offsetWidth
                    h = container.clientHeight; // container.offsetHeight

                    console.log( " w : " + w + " h : " + h);
                    renderer.setSize( w, h );
                    camera.aspect = w / h;
                    camera.updateProjectionMatrix();
                }, false );
            }

            function loop() {
                time += 0.01;
                requestAnimationFrame( loop );
                cube.rotation.x = time ;
                cube.rotation.y = time ;
                renderer.render( scene, camera );
            }

        </script>
    </body>
</html>

问题描述

推荐答案