100% textarea problem

HTML & CSS
1

I am trying to display a textarea so that it will size according to the amount of content (generated dynamically). I tried the example supplied by Paul O’B:

<!-- quirks mode forced with the xml declaration –>
<?xml version=“1.0” encoding=“iso-8859-1”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Untitled Document</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<style type=“text/css”>

  • {margin:0;padding:0}
    body,html {
    height:100%;
    /overflow:hidden; add this if all you want is the text area on the page/
    }
    form#textareaHolder {
    height:100%;
    width:100%;
    }
    textarea {
    min-height:100%;
    width:100%
    }
  • html textarea{height:100%}
    </style>
    </head>
    <body>
    <form action=“” id=“textareaHolder”>
    <textarea></textarea>
    </form>
    </body>
    </html>

This works fine until I tried enclosing the form in a container division, and then it would not display correctly any longer:

<!-- quirks mode forced with the xml declaration –>
<?xml version=“1.0” encoding=“iso-8859-1”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Untitled Document</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<style type=“text/css”>

  • {margin:0;padding:0}
    body,html {
    height:100%;
    /overflow:hidden; add this if all you want is the text area on the page/
    }
    form#textareaHolder {
    height:100%;
    width:100%;
    }
    textarea {
    min-height:100%;
    width:100%
    }
  • html textarea{height:100%}
    </style>
    </head>
    <body>
    <div id=“container”>
    <form action=“” id=“textareaHolder”>
    <textarea></textarea>
    </form>
    </div>
    </body>
    </html>

I have tried all sorts of combinations of #container in the style rules but cannnot seem to determine the correct selector. Can anyone help?

C

2

Hi,

When you place a container around the form then the container is height auto and any following heights collapse to zero if they are based on a percentage of the parent.

You would need to set a height on #container for the height to take effect on the textarea.


#container{height:100%;width:100%}

However I’m not sure if that’s what you wanted and it probably won’t work in mozilla because it will limit the container to 100% and won’t let it get any biigger. Anyway even if it did work it would be having the same effect as the original version anyway and giving you 100% height.

I’m not sure what you were expecting (or wanted) to happen. Couldn’t you just set an arbitrary size and let scrollbars appear?

3

This works fine in both IE and FF, and is just what I need. I hadn’t considered that the enclosing container would be height auto …

Thanks Paul

C