StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think it is important to understand that setting <code>height: 100%</code> for a textarea will only work in IE if you explicitly set it to quirks mode, though it works as expected in Firefox. The W3C states that the size of a textarea is defined in rows rather than pixels, etc.</p> <p>Shown below is an easy way to ensure that the size of the textarea <em>always</em> takes up the entire body height, taking into account the godzillions of user-installed toolbars, etc., varying monitor resolutions and possibly even resized windows. The key is the simple JS method and its placement. The form is just there to simulate normal textboxes and labels.</p> <pre><code><html> <head runat="server"><title>Look, Mom! No Scrollbars!</title></head> <body onload="resizeTextArea()" onresize="resizeTextArea()"> <form id="form1" runat="server"> <div id="formWrapper" style="height:200px"> <input type="text" value="test" /> <input type="text" value="test" /> </div> <textarea id="area" style="width: 100%"></textarea> </form> <script type="text/javascript"> function resizeTextArea() { //Wrap your form contents in a div and get its offset height var heightOfForm = document.getElementById('formWrapper').offsetHeight; //Get height of body (accounting for user-installed toolbars) var heightOfBody = document.body.clientHeight; var buffer = 35; //Accounts for misc. padding, etc. //Set the height of the textarea dynamically document.getElementById('area').style.height = (heightOfBody - heightOfForm) - buffer; //NOTE: For extra panache, add onresize="resizeTextArea()" to the body } </script> </body> </html> </code></pre> <p>Copy and paste it into a new page. It works in both FF and IE.</p> <p>Hope this helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload