Высота div HTML постоянно увеличивается при изменении размера окна

У меня есть простая сцена 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="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>
Источник

2 ответа

Решение

line-height:0; Свойство css делает свое дело и сохраняет высоту контейнера.

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

Идея использовать это свойство исходит из этого вопроса

пример jsfiddle

Источник

Это происходит потому, что изначально контейнер DIV имеет высоту 104px, хотя CANVAS имеет высоту 100px. Я смотрел в F12, но не мог видеть очевидную причину, такую ​​как дополнение. Таким образом, вы устанавливаете холст на 104px, что делает div 108px, и так далее.

Быстрое решение состоит в том, чтобы учесть 4, и это показывает, что проблема заключается в вышеуказанном.

renderer.setSize( w, h - 4 );

Боюсь, что вам нужно будет найти более надежный способ найти разницу в росте.

Источник
Другие вопросы по тегам