Question

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

E.g。

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

我尝试了很多东西，但我总是最后得到两个滚动条（一个用于textarea，一个用于身体）。

Answer 1

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

＆＃13;

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

＆＃13;

<div id="top">Top</div>
<textarea id="text">Textarea</textarea>

＆＃13;

Answer 2

如果我理解正确，也许这可以帮助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;
}

Answer 3

检查此代码

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

如何扩展textarea以填充页面

3 个答案: