How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

How can I prevent the textarea from stretching beyond its parent DIV element?

I have this textarea inside a table which is inside a DIV and it seems that it causes the entire table to stretch out of its bounds.

You can see an example of the same situation even in a more simple case, just putting a text area inside a div (like what is used here in www.stackoverflow.com)

You can see from the images below that the textarea can stretch beyond the size of its parent? How do I prevent this?

I'm kind of new to CSS so I don't really know what CSS attributes should I be using. I tried several like display, and overflow. But they don't seem to do the trick. Anything else I might have missed?

the div section

the text area

UPDATE: HTML

CSS

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

If you put this code inside the http://jsfiddle.net, you will see that they act differently. Although the textarea is limited to the percentage declared in its css style, it is still possible to get it to cause its parent table to be as large as it wants to be, and then you can see that it spills over its parent border. Any thoughts on how to fix this? ​

144574 次浏览
小开
最佳答案

完全禁用调整大小:

textarea {
resize: none;
}

To allow only vertical resizing:

textarea {
resize: vertical;
}

只允许横向调整大小:

textarea {
resize: horizontal;
}

Or you can limit size:

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

To limit size to parents width and/or height:

textarea {
max-width: 100%;
max-height: 100%;
}
小开 
textarea {
width: 700px;
height: 100px;
resize: none; }

为文本区域分配所需的宽度和高度，然后使用。 Resize: none; css 属性，它将禁用 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 在这里没有那么缩进..。

然后我所做的(如下所示)是非常具体地调整百分比，直到我发现那些工作完全适合显示，无论什么设备屏幕使用。

Granted, I think the "resize: none;" is overkill, but better safe than sorry and now the consumers will not have anyway to resize the box, nor will it matter what device they are viewing it from.

效果很好。

小开

通过 CSS3调整大小属性可以调整织物大小控制 :

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

Allowable values self-explanatory: none (disables textarea resizing), both, vertical and horizontal.

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

如果您想约束 textarea 元素的宽度和高度，这不是问题: 这些浏览器也尊重 max-height、 max-width、 min-height和 min-width CSS 属性，以提供在一定比例的调整大小。

Code example:

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


提交答案