html - Textarea height: 100%

Question

Here's my fiddle: http://jsfiddle.net/e6kCH/15/

It may sound stupid, but I can't find a way to make the text area height equal to 100%. It works for the width, but not for height.

I want the text area to resize depending of the window size...like it works in my fiddle for the width...

Any ideas?

Answer 1

Height of an element is relative to its parent. Thus, if you want to make expand your element into the whole height of the viewport, you need to apply your CSS to html and body as well (the parent elements):

html, body {
    height: 100%;
}

#textbox {
    width: 100%;
    height: 100%;
}

Alternative solution with CSS3: If you can use CSS3, you can use Viewport percentage units and directly scale your textbox to 100 % height (and 100% width) of the viewport (jsfiddle here)

body {
    margin: 0;
}
#textbox {
    width: 100vw;
    height: 100vh;
}