PLAYCUBE PLAYCUBE - 2 months ago 5x
CSS Question

CSS: How to set the width and height dependent on the screen/window size?

Following up this question here I am trying to get a good rendering of a floating 3D cube using three.js. The camera proportions are

window.innerWidth / window.innerHeight
and since I am using a rectangular div container, I get a flattened cube. Something like this.

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:


#render {
width: 450px;
height: 250px;

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?


There are units displaying elements depending to the screen : vh and vw

vh : means viewport hight.

ie : height:50vh; will take 50% height of the screen ( and not of the parent element ).

vw : means viewport width.

ex : width:50vw; will take 50% width of the screen ( and not of the parent element ).