设置字段集中 textarea 的最大宽度

Posted 2023-05-07

【中文标题】设置字段集中 textarea 的最大宽度

【英文标题】：Set max-width for textarea within fieldset

【发布时间】：2021-04-15 05:30:08

【问题描述】：

我想将文本区域的拉伸限制为父字段集的 100%。

根据这个问题，当父级是 div 时，它可以工作： How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

现在使用 fieldsets 这似乎不起作用：http://jsfiddle.net/b4oLy135/7/

html

<fieldset id="container">
    <textarea></textarea>
</fieldset>

CSS

textarea 
    max-width: 50%;

#container 
    max-width: 80%;
    border: 1px solid red;
    

我在这里错过了什么？

【参考方案1】：

您可以执行以下操作。

#container 
  position: relative;
  max-width: 80%;
  overflow: none;
  border: 1px solid red;
  height: 100px;
  margin: 0;
  padding: 5px;


textarea 
  position: absolute;
  display: block;
  width: 40%;
  max-width: calc(100% - 15px);
  height: 40%;
  max-height: calc(100% - 15px);
 

<fieldset id="container">
    <textarea></textarea>
</fieldset>

这样textarea 只能调整为其父fieldset 的宽度和高度。

【参考方案2】：

如果您的字段集中有多个<input>，则绝对定位不起作用。

我的解决方案是在每个 <textarea> 字段上使用一个包装器，这样我就可以使用 the solution I referred to in t the question。

重要提示： 在父级上使用% 时不起作用。 使用% 并拉伸父级超过200% 时存在错误。

这是我目前的小提琴： https://jsfiddle.net/d23hgb8w/3/

HTML

<fieldset>
    <div class="textarea__wrapper">
      <textarea></textarea>
    </div>
    
    <input>
</fieldset>

CSS

.textarea__wrapper 
  border: 1px solid red;
  width: 500px;


textarea 
  max-width: 100%;