CSS: Height of textarea as a percentage of the viewport height

StackOverflow https://stackoverflow.com/questions/632983

  •  08-07-2019
  •  | 
  •  

Question

I'd like to say that the height of a text area is equal to, say, 50% of the height of the viewport. How can I do that? A simple height: 50% doesn't do the trick.

Was it helpful?

Solution

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

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

So you have to give its parent a percentage height. And the parent's parent, all the 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 possibility if you don't want to have to set height on everything is to use absolute positioning. This changes the element that dimensions are based on from the direct parent to the nearest ancestor with a ‘position’ setting other than default ‘static’. If there are no ancestor elements with positioning, then dimensions are based on the “Initial Containing Block”, which is the same size as the viewport.

Finally, there's the trivial problem of ‘100%’ being slightly too big because of the additional padding and border applied to textareas. You can 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’).

OTHER TIPS

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

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

So if we set the height of the textarea to 50vh, it will get 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 browsers, except for Opera mini and partial support in IE.

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

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

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

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

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

Simply use the following code:

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

What browser(s) were you having issues with?

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

Try remove

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top