Menu
Is there an easy way to make the height of a fill up to the height of the page?
356
I think it is important to understand that setting height: 100% 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.
Shown below is an easy way to ensure that the size of the textarea always 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.
<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>
Copy and paste it into a new page. It works in both FF and IE.
Hope this helps!
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
