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 its

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.