Question

是否有一种简单的方法可以使填充高度达到页面高度？

Answer 1

我认为重要的是要理解为textarea设置height: 100%只有在明确将其设置为怪癖模式时才能在IE中工作，尽管它在Firefox中按预期工作。 W3C声明textarea的大小是以行而不是像素等定义的。

下面显示的是一种简单的方法，可以确保textarea 总是的大小占用整个身高，同时考虑到用户安装的工具栏等的各种不同，不同的显示器分辨率和甚至可能调整窗口大小。关键是简单的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。

希望这有帮助！

使TextArea垂直填充页面的其余部分？

1 个答案: