如何防止 textarea 超出其父 DIV 元素？ （仅限谷歌浏览器问题）

Question

如何防止文本区域超出其父 DIV 元素？

我在一个 DIV 内的表格中有这个 textarea，它似乎导致整个表格超出了它的界限。

即使在更简单的情况下，您也可以看到相同情况的示例，只需将文本区域放在 div 中（就像 www.stackoverflow.com 中使用的那样）

您可以从下面的图片中看到 textarea 可以超出其父级的大小？如何防止这种情况发生？

我对 CSS 有点陌生，所以我真的不知道应该使用哪些 CSS 属性。我尝试了几个像 display 和 overflow。 但他们似乎没有做到这一点。 还有什么我可能错过的吗？

更新： HTML

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ​

如果您将此代码放在http://jsfiddle.net 中， 你会看到他们的行为不同。尽管 textarea 被限制在其 css 样式中声明的百分比，但仍然可以让它使其父表尽可能大，然后您可以看到它溢出其父边框。 关于如何解决这个问题的任何想法？ ​

Answer 1

完全禁用调整大小：

textarea {
    resize: none;
}

只允许垂直调整大小：

textarea {
    resize: vertical;
}

只允许水平调整大小：

textarea {
    resize: horizontal;
}

或者你可以限制大小：

textarea {
    max-width: 100px; 
    max-height: 100px;
}

将尺寸限制为父母的宽度和/或高度：

textarea {
    max-width: 100%; 
    max-height: 100%;
}

Answer 2

Textarea 调整大小控件可通过CSS3 resize property：

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

允许值不言自明：none（禁用 textarea 调整大小）、both、vertical 和 horizontal。

注意，在 Chrome、Firefox 和 Safari 中，默认值为 both。

如果您想限制 textarea 元素的宽度和高度，这不是问题：这些浏览器还尊重 max-height、max-width、min-height 和 min-width CSS 属性以提供在特定比例内调整大小.

代码示例：

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}

<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>

Answer 3

我希望您遇到与我遇到过的问题相同的问题...我的问题很简单：在容器内创建一个具有锁定百分比的固定文本区域（我是 CSS/JS 的新手/HTML，所以请耐心等待，如果我没有正确理解术语），因此无论它显示在什么设备上，填充容器（表格单元格）的框都会占用正确的空间量。以下是我的解决方法：

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

那么 CSS 看起来像这样……

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

抱歉这里的代码块草率，但我必须向您展示什么是重要的，我不知道如何在这个网站上插入引用的 CSS 代码。无论如何，为了确保你明白我在说什么，重要的 CSS 在这里没有缩进......

然后我所做的（如此处所示）非常具体地调整百分比，直到我找到完美适合显示的百分比，无论使用什么设备屏幕。

当然，我认为“调整大小：无；”有点矫枉过正，但比抱歉更安全，现在消费者无论如何都不需要调整盒子的大小，也不管他们从什么设备上查看它。

效果很好。

Answer 4

textarea {
width: 700px;  
height: 100px;
resize: none; }

为 textarea 分配所需的宽度和高度，然后使用。 resize: none ; 将禁用 textarea 的可拉伸属性的 css 属性。