Textarea height: 100%

HtmlCss

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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;
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionlarin555View Question on Stackoverflow
Solution 1 - HtmljsalonenView Answer on Stackoverflow