Geek Answers Handbook

Make TextArea fill the rest of the page vertically?

Is there an easy way to make the fill height to the height of the page?

+5
source share
1 answer

I think it’s important to understand that setting height: 100%for a text field will only work in IE if you explicitly set it to quirks mode, although it works as expected in Firefox. The W3C states that the size of the text field is determined in lines, not pixels, etc.

, , , , .., , , . - JS . .

<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>

. FF, IE.

, !

+4

More articles:


All Articles