Dynamic CSS auto size of div

Question

Whats wrong with this?

CSS:

width:auto;
height:auto;
min-width:500px;
min-height:500px;

The width works and dynamically re-size to the window, but the height just gets set to the min-height.

JSFiddle DEMO

Answer 1

It has nothing to adjust to, you need to set

body,html{
   height: 100%;
}

and change height to 100% instead of auto if you want it to take up the size

#div1 {
  width:auto;
  height:100%;
  min-width:500px;
  min-height:500px;
  background-color:#F00;
}