logo标签列表

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

htmlcsstwitter-bootstrap-3
20

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

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

如何做？

为什么不直接使用 height: 100%？ - Zhihao
3
因为使用Bootstrap和所有预定义的默认设置并不能让它起作用。 - davidkonrad
8个回答
16
html, body, .container {
  height: 100%;
}
textarea.form-control {
  height: 100%;
}

请在Fiddle上查看演示

8

我认为这是一个bootstrap问题。我曾遇到过类似的问题，其中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>

改用form-group功能可以解决此问题：
<div class="form-group">
    <textarea class="form-control" rows="8"></textarea>
</div>

那应该能为您解决问题。
3

对于Bootstrap 3，我的情况无法使用此方法。你可以尝试修改行数。

<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> 这段代码是有效的。 - Mehmet Sefa Balık
3
textarea { 
   min-height: 100%;
}
你试过了吗？它不起作用。这是一个 bootstrap 问题。 - davidkonrad
2
你可以使用CSS：
textarea {
    height: 100%;
}

相对于顶层。
你试过了吗？它不起作用。这是一个 bootstrap 问题。 - davidkonrad
是的，但不包括 block。这是我的错。看一下 jsfiddle，我告诉过你，你需要先考虑主容器，例如 davidkonrad。 - skozz
0

这解决了我的问题.. 我将高度设置为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>
0
这对我有用。 我也在使用Bootstrap 3。 我的文本区域位于一个容器中。
textarea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
0

.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;
}
编辑并添加一个可工作的代码片段，以便用户可以测试代码。 - Chamsddine Bouzaine
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接