A div with auto resize when changing window width\height

Question

I've looked everywhere . and still couldn't come up with sample code of a very "basic" idea:

A div that is taking 90% of the screen size and it is adjusting itself whenever the browser size changes (to take 90% of the relative screen)

The nested divs inside it should resize themselves as well.

Is it even possible?

EDIT:

Width 90% is not working when I try to re size the screen vertically.

Answer 1

Use vh attributes. It means viewport height and is a percentage. So height: 90vh would mean 90% of the viewport height. This works in most modern browsers.

Eg.

div {   height: 90vh; } 

You can forego the rest of your silly 100% stuff on the body.

If you have a header you can also do some fun things like take it into account by using the calc function in CSS.

Eg.

div {   height: calc(100vh - 50px); } 

This will give you 100% of the viewport height, minus 50px for your header.