[ACCEPTED]-CSS: Height of textarea as a percentage of the viewport height-height

Accepted answer
Score: 42

A simple height: 50% doesn't do the trick.

No, because 20 its parent doesn't have an explicit height. So 19 50% of what? Parent says ‘auto’, which means 18 base it on the height of the child content. Which 17 depends on the height on the parent. Argh! etc.

So 16 you have to give its parent a percentage 15 height. And the parent's parent, all the 14 way up to the root. Example doc:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>

The other 13 possibility if you don't want to have to 12 set height on everything is to use absolute 11 positioning. This changes the element that 10 dimensions are based on from the direct 9 parent to the nearest ancestor with a ‘position’ setting 8 other than default ‘static’. If there are 7 no ancestor elements with positioning, then 6 dimensions are based on the “Initial Containing 5 Block”, which is the same size as the viewport.

Finally, there's 4 the trivial problem of ‘100%’ being slightly 3 too big because of the additional padding 2 and border applied to textareas. You can 1 work around this by:

  • compromising on something like 95%, or
  • setting padding and border to 0/none on the textarea, or
  • using “box-sizing: border-box;” to change what ‘height’ means. This is a CSS future soup feature which requires many additional browser-specific restatements (such as ‘-moz-box-sizing’).
Score: 10

Here is a little example of a textarea which takes 7 exactly 50% of the viewport height using 6 the CSS3 vh viewport unit which is

Equal to 1% of the height 5 of the initial containing block.

So if we 4 set the height of the textarea to 50vh, it will get 3 half of the body height:

html, body, textarea {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

textarea {
  height: 50vh;
}
<textarea></textarea>

It's pretty good supported by the different 2 browsers, except for Opera mini and partial support 1 in IE.

Score: 2

I think you need to use javascript in some 2 way to do this. Handle the resize event, and 1 set the text area to be that many pixels.

Score: 1

You can do it if you set display:block. But 3 in html 4.01 strict you must define cols 2 and rows, but I think you can override them 1 with css.

Score: 1

HTML and CSS aren't so good at doing this 5 kind of thing with heights. They are definitely 4 more about scrolling vertically through 3 a free-flowing page. I think JavaScript 2 is likely to be your most complete solution, as 1 FryGuy says.

Score: 0

While I do not have all browsers to test 5 this in, it appears as though most accept 4 simply specifying the height should work.

I 3 tested this in Internet Explorer 7, and 2 Firefox 3.0.

Simply use the following code:

<textarea style="height: 50%; width: 80%;">Your text here</textarea>

What 1 browser(s) were you having issues with?

Score: 0

This was probably not around when this question 2 was asked, but CSS Values and Units Module 1 Level 3 includes viewport-percentage lengths. It seems not to be supported on mobile browsers except iOS, though.

More Related questions