如何防止文本区域超出其父DIV元素？（仅限google-chrome问题）

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

我在DIV内的表中有此textarea，看来这会导致整个表超出其范围。

您甚至可以在更简单的情况下看到相同情况的示例，只需将文本区域放在div中即可（例如www.stackoverflow.com中使用的内容）

您可以从下面的图像中看到文本区域可以扩展到其父区域之外的大小吗？我该如何预防？

我是CSS的新手，所以我真的不知道应该使用什么CSS属性。我尝试了几次类似的显示，并且溢出。但是他们似乎并不能解决问题。我可能还错过了什么？

更新：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样式声明的百分比，但仍然有可能使它的父表达到想要的大小，然后您可以看到它溢出到父边界上。有关如何解决此问题的任何想法？

要完全禁用调整大小：

textarea {
    resize: none;
}

只允许垂直调整大小：

textarea {
    resize: vertical;
}

只允许水平调整大小：

textarea {
    resize: horizontal;
}

或者您可以限制大小：

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

要将大小限制为父母的宽度和/或高度：

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

Textarea调整大小控件可通过CSS3的resize属性获得：

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

允许的值不言自明：（none禁用调整文本区域的大小）both，vertical和horizontal。

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

如果要约束textarea元素的宽度和高度，这不是一个问题：这些浏览器也很尊重max-height，max-width，min-height，和min-widthCSS属性提供一定比例内调整。

代码示例：

#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>

我希望你有同样的问题，我有 ......我的问题很简单：做一个固定的textarea与容器里面反锁百分比（我是新来的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此处缩进了一点……

然后，我所做的工作（如此处所示）非常具体地调整了百分比，直到无论使用哪种设备屏幕，我都找到了最适合显示的百分比。

当然，我认为“调整大小：无；” 是过大的，但是比后悔要安全得多，现在，消费者将无须调整盒子的大小，无论从什么设备观看它都无所谓。

效果很好。

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

为文本区域分配所需的宽度和高度，然后使用。 调整大小：无；css属性将禁用textarea的可拉伸属性。