gpt4 book ai didi

html - 让 TextArea 垂直填充页面的其余部分?

转载 作者:太空狗 更新时间:2023-10-29 16:03:30 24 4
gpt4 key购买 nike

有没有一种简单的方法可以使填充的高度达到页面的高度?

最佳答案

我认为理解为文本区域设置 height: 100% 仅在您明确将其设置为 quirks 模式时才能在 IE 中工作很重要,尽管它在 Firefox 中按预期工作。 W3C 声明文本区域的大小是以行而不是像素等定义的。

下面显示的是一种确保文本区域的大小始终占据整个 body 高度的简单方法,考虑到用户安装的工具栏等的无数,不同的显示器分辨率和甚至可能调整窗口大小。关键是简单的 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。

希望这对您有所帮助!

关于html - 让 TextArea 垂直填充页面的其余部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1813984/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com