HTML div高度不斷增長窗口調整大小事件

我有簡單的three.js場景（畫布），我想對窗口調整大小事件（尤其是屏幕的寬度變化，保持高度不變）事件作出響應。在正常情況下，我使用window.innerWidth,window.innerHeight屬性來設置畫布的大小以匹配窗口大小。HTML div高度不斷增長窗口調整大小事件

但是我想在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>

來源

2017-01-23 mtx

你在哪裏在你的代碼中設置div容器的大小？ – prisoner849

@ prisoner849我沒有設置容器的大小。我只設置畫布的大小（通過渲染器）。 – mtx

當我將REGL（不同的WebGL庫）附加到我的div時，我也有類似的問題。當我調整瀏覽器窗口的大小，它的增長和增長和增長 –

line-height:0; css-property會訣竅並保持容器的高度。

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

的想法使用這個屬性來自this SO question

jsfiddle例如

來源

2017-01-24 22:40:17 prisoner849

它的發生，因爲容器DIV實際上是104px高一開始，儘管畫布100像素高。我查看了F12，但看不到明顯的原因，比如填充。所以你然後設置畫布爲104px，這使得div的108px，等等。

一個快速解決方案是佔4，這表明你是上述問題。

renderer.setSize(w, h - 4);

恐怕您需要找到一種更穩健的方式來找到身高差異。

來源

2017-01-23 20:23:43

感謝提示，在mac上的值是6而不是4，與此修復它確實保持高度不變。我已經把所有項目的邊距和填充設置爲0px，但仍然是相同的結果。進一步尋找其他解決方案... – mtx

HTML div高度不斷增長窗口調整大小事件

回答

相關問題