Javascript 文本区域始终具有窗口高度_Javascript_Jquery_Css_Twitter Bootstrap_Twitter Bootstrap 3

Javascript 文本区域始终具有窗口高度

javascript jquery css twitter-bootstrap twitter-bootstrap-3

Javascript 文本区域始终具有窗口高度,javascript,jquery,css,twitter-bootstrap,twitter-bootstrap-3,Javascript,Jquery,Css,Twitter Bootstrap,Twitter Bootstrap 3,我不知道该怎么做。我目前正在使用Bootstrap的textarea及其容器。我不知道如何使文本区域延伸到屏幕底部，根据窗口高度自动增加/减少。我试过： #form-control { position:fixed; top:0; left:0; right:0; bottom:0; } 但一切似乎都没有改变。有人知道我怎么做吗编辑：这是我的html文件： <body> <div class="container">

我不知道该怎么做。我目前正在使用Bootstrap的textarea及其容器。我不知道如何使文本区域延伸到屏幕底部，根据窗口高度自动增加/减少。我试过：

#form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

但一切似乎都没有改变。有人知道我怎么做吗

编辑：

这是我的html文件：

<body>
    <div class="container">
        <div class="form-group">
            <textarea class="form-control" rows="15" id="note"></textarea>
        </div>
    </div>
</body>

您必须像下面的代码一样在元素上放置height属性

#form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:50px;
}

如果不行，试试看！重要的。如果也不起作用，请尝试在标记中设置行，并在CSS上设置行高

<textarea rows="4">

您可以使用

height

属性将其设置为特定高度

您可以这样做：

#form-control {
position:fixed;
height: 200px;
}

或

举几个例子

我建议您查看W3学校页面上的高度css属性。。。如果你阅读了这一页，你可以看到你还可以如何调整它的大小

在那个页面上还有一个指向演示的链接，我建议您尝试看看不同的“设置”对于缺少更好的单词有什么作用

还要确保打开的

标记调用。。。所以它应该看起来像这样

祝你好运

。表单控件

应该是用于引导的CSS类

您正在使用

？如果是这样，您的css规则将使用

，它对应于元素ID，而不是类。将CSS更改为：

.form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

试试这个代码。实际上您已经使用了（id）#表单控件，它应该是（class）.form控件我已经使用了你的代码，只是增加了100%的宽度现在需要屏幕的高度和宽度

.form控件{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%
}

啊，这很有效！但问题是，我希望在它周围有

容器

div，这样我可以使文本区域仅位于

div

内，并且在屏幕底部我可以再放置1-2行信息。在这种情况下，您可以在容器上设置固定高度，并将100%设置为#form conrol的height属性。不要忘记设置位置：将容器固定在容器上。右，<代码> ./COD>使它有效，但我想使容器DIV包装，这样我就可以将TeTebe定位在屏幕中间。可能吗？这是因为我想在屏幕底部留出一些空白，以便使用一些额外的文本/函数，而不是使用

位置：绝对

，并将

位置：相对

添加到

.container

div中。我成功地使其工作，但与这里的所有内容相比，它看起来有所不同哈哈：S@Rohinder真是太棒了！在这种情况下，您应该提交自己的答案并将其标记为已接受。

.form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}