Html 如何在 Bootstrap 3 中将 Textarea 设置为 100% 高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21261851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a Textarea to 100% height in Bootstrap 3?
提问by Jay
I would like to set a textareato be 100% height. I'm using Bootstrap 3but couldn't find an option there.
我想将 atextarea设置为 100% 高度。我正在使用Bootstrap 3，但在那里找不到选项。
<div class="container">
<textarea class="form-control" rows="8"></textarea>
</div>
How to do it?
怎么做？
采纳答案by davidkonrad
html, body, .container {
height: 100%;
}
textarea.form-control {
height: 100%;
}
See demo on Fiddle
回答by Javamav
I believe this is a bootstrap issue. I ran into a similar problem where the textarea was not allowing for more than 1 row. I found (through trial and error) that placing the textarea in a div and then ignoring the form-group-(x) call within the first div, I was able to control the rows and the cols within the textarea.
我相信这是一个引导问题。我遇到了一个类似的问题，其中 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>
Changing your code to use the form-group functionality will correct the issue:
更改您的代码以使用表单组功能将更正此问题：
<div class="form-group">
<textarea class="form-control" rows="8"></textarea>
</div>
That should do the trick for you.
那应该对你有用。
回答by CRABOLO
textarea {
min-height: 100%;
}
回答by Xam1311
Doesn't work for me for bootstrap 3- davidkonrad You can try to modify the number of rows
Bootstrap 3-davidkonrad 对我不起作用 您可以尝试修改行数
<textarea class="form-control" cols="60" rows="16"></textarea>
or give a height fixed for the parent container
或为父容器提供固定的高度
.form-group{
height:250px;
}
textarea{
height:100%;
}
回答by skozz
You can use CSS:
您可以使用 CSS：
textarea {
height: 100%;
}
Relative to the top layer.
相对于顶层。
回答by theawesomecoder61
This worked for me. I am using Bootstrap 3 as well. My textarea is inside a container.
这对我有用。我也在使用 Bootstrap 3。我的 textarea 在一个容器内。
textarea {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
回答by John Warren Mondido Ta?iza
This solves my problem.. I set the height to auto !important.
这解决了我的问题。我将高度设置为 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>
