CODEWITHSUNDEEP
htmlcss
SnickersAreMyFave
SnickersAreMyFave

Reputation: 5143

HTML textarea styles

Let's say within the <body> of my web page, all I have is a <textarea> element.

This <textarea> should be as wide and tall as the browser window (minus any padding or margin the <body> has, or any default computed styles per browser).

I can make it as wide as the window by setting display:block;width:100%, but it doesn't stretch to the height of the window (see http://jsfiddle.net/4MBAs/) when I include height:100%.

How can I stretch the height out to reach the bottom of the browser—without having to use JavaScript?

Upvotes: 0

Views: 1350

Answers (2)

MForster
MForster

Reputation: 9386

Here's an alternative:

textarea {
  position: absolute;
  bottom: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
}

That does not preserve the body padding, though.

Upvotes: 0

oezi
oezi

Reputation: 51817

you have to set height:100%; on body and html too.

try it like this:

body, html {
  height: 100%;
}

textarea {
  height: 100%;
  width: 100%;
}

Upvotes: 1

Related Questions