引导程序 3 的文本区域 100%答案

【问题标题】：Textarea 100% for bootstrap 3引导程序 3 的文本区域 100%
【发布时间】：2014-06-16 10:29:04
【问题描述】：

我发现了一篇关于这个主题的帖子 (How to set a Textarea to 100% height in Bootstrap 3?)

在我需要开始修改它之前，它工作得很好。整个页面将超过 100%。下面是我使用的代码。

<div class="container">
  <div class="row">
      <div class="col-md-12">
          <div class="page-header">
            <h3>Short Essay</h3>
          </div>
          <p>
            Submit a short essay no longer than 1000 words about "How I could realize my career aspiration @Company Abc?"
          </p>
          <hr>
          <form>
              <div class="form-group">
                <textarea class="form-control" rows="8"></textarea>
              </div>
          </form>
      </div>
  </div>
</div>

http://jsfiddle.net/p9G8K/1/

注意窗体实际上超出了窗口框架？我附上了一张图片以更好地说明

似乎文本区域是整个页面的 100% 加上标题

和我的

。

-- 编辑 -- 期望结果的屏幕截图

我想要完成的是以下

请指教。

谢谢！

【问题讨论】：

小提琴出了什么问题？据我所知，该表单没有占用任何标题或 p 空间。
嗨，丹，感谢您的快速回复。我用屏幕截图更新了我的问题。注意在屏幕截图中，textarea 的 100% 实际上使整个页面高于窗口框架的高度？（因此，您会看到滚动条）。
所以你希望它是 100% 的视口？这意味着它需要在用户调整浏览器大小时更改大小。或者您需要检测用户浏览器大小并相应地更改文本区域，因为每个用户都有不同的浏览器大小。你确定这是你想做的吗？
很抱歉给您带来了困惑。也许我的问题措辞不正确，让我用欲望输出的屏幕截图更新问题。
截图真的没有帮助，我认为你没有正确理解这个问题。您是否意识到每个人都有不同的浏览器大小窗口？根据每个用户的屏幕和浏览器大小，您的“期望结果”看起来会有所不同（除非您检测到并相应地调整您的显示，但这对于不必要的功能来说似乎需要做很多工作）。

标签： html css twitter-bootstrap-3

【解决方案1】：

这取决于您正在寻找什么样的外观。我认为您可能需要为 <div class='form-group'> 元素指定 width/height。
指定这一点后，您应该能够将<textarea> 的width/height 设置为100%，从而填充所需的空间。

【讨论】：