我怎样才能防止textarea伸出父DIV元素？ （只有谷歌浏览器问题）
我怎样才能防止textarea伸出父DIV元素？
我把这个textarea放在一个DIV里面的表里面，看起来它会导致整个表伸出它的边界。
即使在一个更简单的情况下，你也可以看到一个相同情况的例子，只是把一个文本区域放在一个div里面（就像在www.stackoverflow.com中使用的那样）
你可以从下面的图片看到，textarea可以伸展超过其父级的大小？ 我如何防止这种情况？
我是一种新的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风格声明的百分比，但是仍然可以让它的父expression到它想要的大小，然后你可以看到它溢出了它的父边界。 任何想法如何解决这个问题？
要完全禁用resize：
textarea { resize: none; }
或者你可以限制尺寸：
textarea { max-width: 100px; max-height: 100px; }
限制父母的宽度和/或身高：
textarea { max-width: 100%; max-height: 100%; }
Textarearesize的控件可以通过CSS3的resize属性获得 ：
textarea { resize: both; } /* none|horizontal|vertical|both */ textarea.resize-vertical{ resize: vertical; } textarea.resize-none { resize: none; }
允许值不言自明： none （禁用textarearesize）， both vertical和horizontal 。
请注意 ，在Chrome，Firefox和Safari中默认both 。
如果你想约束textarea元素的宽度和高度，这不是一个问题：这些浏览器也尊重max-height ， max-width ， min-height和min-width CSS属性，以提供一定比例的resize。
代码示例 ：
#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与容器内locking百分比（我是CSS / JS / HTML的新手，所以忍受我，如果我不要让术语正确），以便无论显示在哪个设备上，填充容器的盒子（表格单元格）都占用正确的空间量。 以下是我解决它的方法：
<table width=100%> <tr class="idbbs"> BS: </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在这里被缩减…
然后我做了什么（如图所示）是非常明确地调整百分比，直到我find了适合显示的function，无论使用什么设备屏幕。
当然，我认为“重新调整：没有”; 是过度杀伤，但比对不起更安全，现在消费者不会有任何调整箱子的大小，也不会影响他们正在查看它的设备。
它工作很好。
textarea { width: 700px; height: 100px; resize: none; }
为textarea指定所需的宽度和高度，然后使用。 resize：无; CSS属性将禁用textarea的可伸缩属性。
