title: CSS: How to set the width and height dependent on the screen/window size?
body: <p>Following up this question <a href="https://stackoverflow.com/questions/38763623/three-js-rendering-and-bootstrap-grids/38765856">here</a> I am trying to get a good rendering of a floating 3D cube using three.js. The camera proportions are <code>window.innerWidth / window.innerHeight</code> and since I am using a rectangular div container, I get a flattened cube. Something like<a href="https://imgur.com/a/Ec2Rx" rel="noreferrer"> this</a>.</p>
  
  <p>I tried to get my div container to be in proportion with my screen or window size and it worked! For example for a 1367x768 screen:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#render {
      width: 450px;
      height: 250px;
  }
  </code></pre>
  
  <p>But! I want to have this worked out also for different size, e.g. for smartphones too! It would be perfect to make this fully responsive. Is it possible to get the width and height fully proportional to the screen size in CSS?</p>