CODEWITHSUNDEEP
cssheight
avernet
avernet

Reputation: 31763

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

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.

Upvotes: 13

Views: 50850

Answers (8)

Preview
Preview

Reputation: 35846

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.

Upvotes: 11

KSA dev
KSA dev

Reputation: 51

Try remove

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Upvotes: -2

legoscia
legoscia

Reputation: 41658

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.

Upvotes: 0

bobince
bobince

Reputation: 536755

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’).

Upvotes: 43

easeout
easeout

Reputation: 8734

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.

Upvotes: 1

Brian
Brian

Reputation: 2221

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?

Upvotes: 0

Vasil
Vasil

Reputation: 38186

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.

Upvotes: 1

FryGuy
FryGuy

Reputation: 8744

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.

Upvotes: 2

Related Questions