Preferred/minimum height - html

Question

Does anyone know how to make a DIV behave in such a way that it will always try to consume it's maximum space (Regardless of content)?
For example, if I have a DIV with a max-height of 600px and a min-height of 200px, how can I make it so that:
If the window height is greater than 600px enough it will occupy 600px
If the window height is between 600px and 200px it will occupy all available height
If the window is 200px or less it will always occupy 200px?
An alternative to the above that I could live with would be to ignore the minimum height and just let it scale all the way down.
Eventually, I would like to vertically align it within the window but first things first.
I'd prefer to use pure CSS for this if possible. If it comes to it, I won't have too much trouble writing a script to achieve it.
Any suggestions welcome.
Cheers.

Answer 1

Using only the height property you may obtain this behaviour using a set of mediaqueries
div {
height: 200px;
}
/* needed to stretch the height of div */
#media all and (min-height: 201px) and (max-height: 600px) {
html, body {
height: 100%;
}
}
#media all and (min-height: 201px) {
div {
height: 100%;
}
}
#media all and (min-height: 601px) {
div {
height: 600px;
/* if you need to vertical-align the div, use following rules */
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
}
Live Example (basic): http://codepen.io/anon/pen/NPGbNq
Live Example (with vertical alignment > 600px) http://codepen.io/anon/pen/yyYVag

Answer 2

You can do this in a very simple way without media queries by combining height, max-height and min-height. The browser mediates between them.
div {
height: 100%;
max-height: 600px;
min-height: 200px;
}
See example.
EDIT - VERTICAL CENTRING
To include vertical centring, there's also a smart way without media queries or CSS transforms. This solution should therefore work in IE8.
div {
height: 100%;
max-height: 600px;
min-height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
See example.
Vertical alignment using this smart technique.

Answer 3

see this .it will take 100% width and 100% height at any width and height of windows.
div{
display: block;
background: red;
height: 100%;
width: 100%;
position: fixed;
}
click here