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

Question

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:

CSS:

#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?

Answer 1

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

vh : means viewport height.

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

vw : means viewport width.

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