How do I make an element's height equal to the height of the screen?

I tr开发者_开发技巧ied height: auto; but that doesn't work. Any ideas?

html, body { height: 100%; }
#container { height: 100%; background: red; width: 200px; }

Is this what you are trying to do? Please provide some code.

You have a few options. You can do:

.element{
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    bottom:0px;
}

That way it will be 0px from every side of the first parent element with position other than static. If it's the first element on the page, it will fill the entire document body.

see here for what happens: http://jsfiddle.net/4QH8H/embedded/result/

http://jsfiddle.net/4QH8H/light/

You can also do:

.element{

    height:100%;
    width:100%;

}

Although, those attributes only make it as tall and wide as it's parent element, and sometimes the body will only wrap around the content and not fill the page, so you have to do:

html, body{

    height:100%;
    width:100%;

}