A div with auto resize when changing window width\height

html autoresize
Urbanleg picture Urbanleg · Sep 6, 2013 · Viewed 183.8k times · Source

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

Eric Warnke picture Eric Warnke · Apr 24, 2015

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.

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
Scale image to fit a bounding box

Is there a css-only solution to scale an image into a bounding box (keeping aspect-ratio)? This works if the image is bigger than the container: img { max-width: 100%; max-height: 100%; } Example: Use case 1 (works): http://jsfiddle.net/Jp5AQ/2/ Use case 2 (works): …

Read More
How to automatic resize tinyMCE?

I have a TinyMCE that is set over a TextArea, and I want this editor area to ocuppy all the space of its parent div, all times. I have a JS function that get the current space and set the …

Read More