如何在 Bootstrap 3 中将 Textarea 设置为 100% 高度？答案

【问题标题】：How to set a Textarea to 100% height in Bootstrap 3?如何在 Bootstrap 3 中将 Textarea 设置为 100% 高度？
【发布时间】：2014-02-11 06:24:08
【问题描述】：

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

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

怎么做？

【问题讨论】：

为什么不直接使用height: 100%？
@Zhihao 因为它不能那样工作，使用 boostrap 和所有预定义的默认设置。

标签： html css twitter-bootstrap-3

【解决方案1】：

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

见demo on Fiddle

【讨论】：

【解决方案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>

这应该对你有用。

【讨论】：

【解决方案3】：

textarea { 
   min-height: 100%;
}

【讨论】：

你试过了吗？它不起作用。这是一个引导问题。

【解决方案4】：

对于 bootstrap 3- davidkonrad 不适合我可以尝试修改行数

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

或者给父容器一个固定的高度

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

【讨论】：

<textarea class="form-control" cols="60" rows="16"></textarea> 这是有效的。

【解决方案5】：

你可以使用 CSS：

textarea {
    height: 100%;
}

相对于顶层。

【讨论】：

你试过了吗？它不起作用。这是一个引导问题。
是的，但没有block。我的错。看jsfiddle，我告诉过你，之前需要考虑主容器，比如davidkonrad

【解决方案6】：

这对我有用。我也在使用 Bootstrap 3。我的文本区域在一个容器内。

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

【讨论】：

【解决方案7】：

这解决了我的问题。我将高度设置为自动！重要。

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

【讨论】：

【解决方案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;
}

【讨论】：

编辑并添加一个工作代码 sn-p 以便用户可以测试代码