如何在CSS中存在填充时使TextArea 100%宽度没有溢出?

我有下面的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的总大小到父宽度?

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

我经常使用的一个:

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

请参阅浏览器支持。

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

所以,本着这种精神,你有没有尝试添加一个封装div来应用border / padding,然后把100%宽度的textarea放在里面? 像(未经testing的):

 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> 

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

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

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

看看W3C的具体细节我们可能注意到的其他优点是:

  • 不需要“for”属性:当LABEL标签包含目标input时,点击时自动对子input进行聚焦;
  • 如果已经devise了textarea的外部标签,则不会发生冲突,因为给定的input可能有一个或多个标签。

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

简单的例子:

 <html> <head> <style type="text/css"> .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; } </style> </head> 

<html> <head> <style type="text/css"> .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; } </style> </head>

<BODY>
<div class =“container”>
我是容器
<label class =“textareaContainer”>
<textarea name =“text”>我是一个带边框的填充textarea … </ textarea>
</标签>
</ DIV>
</ BODY>
</ HTML>

.textareaContainer元素的填充和边框是我们要给textarea的元素。 尝试编辑它们以便按照您的需要进行设置。 我向.textareaContainer元素提供了大而可见的填充和边框,以便您可以在单击时看到它们的行为。

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

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

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

我在这里遇到了另一个非常简单的解决scheme:在textarea的容器中添加填充。 这样可以避免textarea上的边距,边框和填充,从而避免了Beck指出围绕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> 

这个代码适用于IE8和Firefox

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

您可以使用box-sizing属性,它支持所有主要的标准兼容浏览器和IE8 +。 尽pipe如此,你仍然需要一个IE7的解决方法。 在这里阅读更多。

不,你不能用CSS做到这一点。 这就是微软最初引入另外一个,也许更实用的盒子模型的原因 。 最终获胜的盒子模型,使得百分比和单位的混合变得不切实际。

我不认为你可以用父母的百分比表示填充和边框宽度。

使用框大小属性 :

 -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 

这将有所帮助

我经常用calc()修复这个问题。 你只给textarea 100%的宽度和一定数量的填充,但是你必须减去你给textarea的100%宽度的左右填充总数:

 textarea { border: 0px; width: calc(100% -10px); padding: 5px; } 

或者,如果你想给textarea一个边框:

 textarea { border: 1px; width: calc(100% -12px); /* plus the total left and right border */ padding: 5px; } 

负利润率如何?

 textarea { border:1px solid #999999; width:100%; margin:5px -4px; /* 4px = border+padding on one side */ padding:3px; } 

如果你像这样填充和抵消它:

 textarea { border:1px solid #999999; width:100%; padding: 7px 0 7px 7px; position:relative; left:-8px; /* 1px border, too */ } 

textarea的右侧与容器的右侧完全alignment, 并且 textarea内的文本与容器中的正文文本完全alignment…并且textarea的左侧“伸出”了一下。 有时更漂亮

对于使用Bootstrap的人来说,textarea.form-control也会导致textarea大小问题。 Chrome和Firefox似乎使用以下Bootstrap CSS使用不同的高度:

 textarea.form-conrtol{ height:auto; }