如何展开文本区域以填充页面

How to expand textarea to fill up page

本文关键字：填充 区域 何展开 文本      更新时间：2023-09-26

我有一个非常简单的html页面，上面有一个顶部栏和一个文本区域。我希望文本区域填充顶部栏留下的高度。调整大小后需要自动调整。

例如

<html>
<body>
  <div id="top" />
  <textarea id="text" />
</body>
</html>

我试过很多东西，但最后总是有两个滚动条（一个用于文本区域，一个用于正文）。

如果你有一个固定高度的顶部栏，你可以使用文本区域上的绝对位置来填充剩下的区域，如下所示：

body {
    margin: 0;
}
#top {
    color: #ffffff;
    background: #333399;
    height: 50px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#text {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px;
    margin: 0;
    resize: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
<div id="top">Top</div>
<textarea id="text">Textarea</textarea>

如果我理解正确，也许这可以帮助jsfiddle，但我不确定这是否是你想要的，这只是我认为你可能会问的原始版本。还要注意，如果您已经重置了css ，那么可以避免一些声明

HTML

<div class="content">
    <div id="top"></div>
    <textarea id="text"></textarea>
</div>

CSS

body,html{
    height:100%;
    padding:0;
    margin:0;
}
.content{
    position:relative;
    height:100%;
}
#top{
    height:50px;
    background-color:#CCC;
    width:100%;
}
#text{
    height:85%;
    border:0;
    padding:0;
    margin:0;
    background-color:#999;
}

检查此代码

JS:

totalCalc();
function totalCalc()
{
    var bodyHeight = $("body").outerHeight(true);
    var topHeight = $("#top").outerHeight(true);
    var txtareaHeight = bodyHeight - topHeight - 10;
    $('#text').attr("style", "height:" + txtareaHeight + "px");
}
$(window).resize(totalCalc);

CSS：

*{margin:0; padding:0; font-family:Tahoma; font-size:12px; color:#333;}
html, body{height:100%; overflow:hidden;}
#top{padding:10px;}
#text{margin:0 10px;}

Fiddle

相关文章：