当CSS中存在填充时,如何使TextArea 100%宽度而不会溢出？

Question

我有以下CSS和HTML片段正在呈现.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

问题是文本区域最终比父级宽8px(边框为2px,填充为6px).有没有办法继续使用边框和填充,但约束textarea父的宽度的总大小？

Answer 1

为什么不？忘记黑客,只是用CSS做？

我经常使用一个:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

请参阅浏览器支持在这里.

Answer 2

许多CSS格式问题的答案似乎是"添加另一个<div>!"

那么,在这种精神中,您是否尝试添加应用了边框/填充的包装div,然后将100%宽度的textarea放入其中？像(未经测试)的东西:

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

Answer 3

让我们考虑向用户呈现我们想要实现的最终输出:带有边框和填充的填充文本区域,这些特征是被点击它们将焦点传递给我们的textarea,以及自动100%宽度的优势典型的块元素.

我认为最好的方法是尽可能使用低级解决方案,以达到最大的浏览器支持.在这种情况下,唯一的HTML可以正常工作,避免使用Javascript(无论如何我们都喜欢).

LABEL标记在我们的帮助中,因为有这样的行为,并允许包含它必须解决的输入元素.它的默认样式是内联元素之一,因此,为标签提供块显示样式,我们可以利用自动100%宽度(包括填充和边框),而内部文本区域没有边框,没有填充和100%宽度.

看一下W3C的细节我们可能会注意到的其他优点是:

• 不需要"for"属性:当LABEL标记包含目标输入时,它会在单击时自动聚焦子输入;
• 如果已经设计了textarea的外部标签,则不会发生冲突,因为给定的输入可能有一个或多个标签.

有关更多详细信息,请参阅W3C细节.

简单的例子:

.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }

.textareaContainer元素的填充和边框是我们想要给textarea的元素.尝试编辑它们以根据需要设置样式.我为.textareaContainer元素提供了大而可见的填充和边框,让您在单击时看到它们的行为.

Answer 4

如果你对填充的宽度不太感兴趣,这个解决方案实际上也会保持填充百分比.

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

不完美,但你会得到一些填充,宽度加起来100%所以这一切都很好

Answer 5

我在这里遇到了另一个非常简单的解决方案:在textarea的容器中添加padding-right.这样可以保留textarea上的边距,边框和填充,从而避免了Beck指出的关于chrome和safari放在textarea周围的焦点突出显示的问题.

容器的填充权应该是textarea两侧的有效边距,边框和填充的总和,以及您可能需要的容器填充.因此,对于原始问题中的情况:

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>

Answer 6

这段代码适用于IE8和Firefox

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

Answer 7

问题出在box-sizing财产上。box-sizing默认情况下，该属性的初始值为content-box。所以你在引擎盖下有这样的东西：

textarea {
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
  box-sizing: content-box;
}

box-sizing: content-box;意味着实际元素的宽度等于元素内容框的宽度。因此，当您添加填充（在本例中为 padding-right 和 padding-left --> 因为我们正在讨论宽度）和边框（在本例中为 border-right 和 border-left --> 因为我们在讨论宽度），这些值将添加到最终宽度。所以你的元素会比你想要的更宽。

将其设置为box-sizing: border-box;. 所以宽度将这样计算：

horizontal border + horizontal padding + width of content box = width

在这种情况下，当您添加水平边框和水平填充时，元素的最终宽度不会改变，事实上，内容框会缩小以满足方程。

Answer 8

您可以使用box-sizing属性,它受所有主要符合标准的浏览器和IE8 +的支持.但是,您仍然需要针对IE7的解决方法.在这里阅读更多.

Answer 9

我一直在寻找内联样式解决方案而不是 CSS 解决方案，这是我可以选择的响应式文本区域的最佳解决方案：

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>