Question

我想将textarea设置为100％的高度。我正在使用Bootstrap 3但在那里找不到选项。

<div class="container">
<textarea class="form-control" rows="8"></textarea>
</div>

怎么做？

Answer 1

html, body, .container {
  height: 100%;
}
textarea.form-control {
  height: 100%;
}

请参阅demo on Fiddle

Answer 2

我认为这是一个引导问题。我遇到了类似的问题，其中textarea不允许超过1行。我发现（通过试验和错误）将textarea放在div中然后忽略第一个div中的form-group-（x）调用，我能够控制textarea中的行和列。

<div class="form-group">
    <label class="col-sm-3 control-label">Description</label>
    <div class="col-sm-9">
        <textarea class="form-control" rows="10"></textarea>
    </div>
</div>

更改代码以使用表单组功能可以解决问题：

<div class="form-group">
    <textarea class="form-control" rows="8"></textarea>
</div>

这应该适合你。

Answer 3

textarea { 
   min-height: 100%;
}

Answer 4

对于我来说，3-davidkonrad引导不起作用您可以尝试修改行数

<textarea class="form-control" cols="60" rows="16"></textarea>

或为父容器指定高度

.form-group{
   height:250px;
 }
textarea{
   height:100%;
}

Answer 5

您可以使用CSS：

textarea {
    height: 100%;
}

相对于顶层。

Answer 6

这对我有用。我也在使用Bootstrap 3。我的textarea在一个容器内。

textarea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 7

这解决了我的问题..我将高度设置为auto！important。

<label for="item_description" style="padding-top: 10px;">Item Description</label>
<textarea class="form-control" name="item_description" rows="3" style="height:auto !important;"></textarea>

Answer 8

.textarea {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>Text Area</title>
</head>

<body>

  <textarea class="textarea"></textarea> 
  <h3>subscribe to my youtube channel<a href="https://www.youtube.com/channel/UCsZ4Ue8c94YLJDbGRafCI5Q">The Gem Dev</a></h3>
</body>

</html>

这对我有用，我将其放在容器中

.textarea {
    position: absolute;
    height: 100%;
    width: 100%;
}
.textarea .text {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

如何在Bootstrap 3中将Textarea设置为100％高度？

8 个答案: