HTML div 高度在 window 调整大小事件中不断增长

Question

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

不过我想在html中嵌入三个场景。所以我在<div id="three-container">.

中放了三个canvas

在下面的代码中，当我调整 window 的大小时（仅限偶数宽度），canvas 的高度不断增长。错误在哪里？我错过了什么？

为了获得 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="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></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>

Answer 1

发生这种情况是因为容器 DIV 实际上最初是 104px 高，即使 CANVAS 是 100px 高。我查看了 F12 但看不到明显的原因，例如填充。因此，您然后将 canvas 设置为 104px，这使得 div 为 108px，依此类推。

一个快速解决方法是考虑到 4，这表明问题出在上面。

renderer.setSize( w, h - 4 );

恐怕您需要找到更可靠的方法来找到高度差异。

Answer 2

line-height:0; css-property 达到目的并保持容器的高度。

#three-container {
  line-height:0;
}

使用这个属性的想法来自 this SO question

jsfiddle 例子

HTML div 高度在 window 调整大小事件中不断增长

HTML div height keeps growing on window resize event

html

element

canvas

window-resize

three.js