Question

我有一个textarea标签，其中包含我希望用户编辑的文字。 textarea标签包含在div中，如下所示：

div.container {
   width: 295px;
   max-height: 250px;
   overflow: auto;
   position: relative;
   border: 1px solid: #EEEEEE;
}
textarea {
   width: 270px;
   height: 100%;
   resize: none;
   overflow: hidden;
   border: none;
}

<div class="container">
   <textarea id="overview">
      blah blah....
   </textarea>
</div>

div具有固定宽度，最大高度，并且当高度太大时显示滚动条。这一切都很好，但我怎样才能使textarea扩展到100％？它目前只有两行高，当我内部有大量文本时，它不会展开以显示所有文本。 Please see this fiddle to see what I'm talking about.

Answer 1

您的div.container需要指定明确的高度。子内容最多不会扩展到max-height，只有height。

这样的事情： http://jsfiddle.net/dpF7k/ 或者更简单地直接应用于textarea而不是包装div：http://jsfiddle.net/ujKCf/

唯一缺少的是，如果内容较少，它不会缩小到250px以下。

Answer 2

textarea只能扩展到div#container

当您将容器设置为max-height: 250px时，它不会扩展到该大小，除非推送它。由于你的textarea是100％，它只使用任何可用的东西。

要了解我的意思，只需将容器设置为height: 250px而不是max-height。

Answer 3

相反，您可以使用 JavaScript 来解决此问题。

这是James Padolsey的jQuery plugin。看起来它完全符合您的要求。

编辑：我认为OP不想要一个滚动条，因为他的溢出...... NVM然后

如何将Textarea扩展为100％仅使用CSS

3 个答案: