当CSS中存在填充时，如何使TextArea的宽度为100％而不会溢出？

426

我正在渲染以下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>
展开摘要

问题是文本区域最终比父区域宽8像素（边框2像素+填充6像素）。有没有办法继续使用边框和填充，但将的总大小限制textarea为父级的宽度？

html  css  stylesheet 
— 埃里克·舒诺弗（Eric Sc​​hoonover）
source
顺便说一句，杰弗里·韦（Jeffrey Way）在tutsplus上为此发表了一篇不错的文章：net.tutsplus.com/tutorials/html-css-techniques/…也许会帮助某人；）
— 某人

Answers:

664

为什么不忘了这些技巧，而只使用CSS？

我经常使用的一种：

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

在此处查看浏览器支持。

— 彼得·比吉尔（Piet Bijl）
source
22
我不敢相信这行得通。但是确实如此。CSS从未如此简单。:-)
— Nate Bird
1
这一定是我一段时间以来发现的最酷的东西之一。谢谢，有没有机会在IE7中也有这种方法？
— 杰里米·A
47
请注意，您仍然希望将width：100％与border-box结合使用。
— 泰勒
3
旧版本的Internet Explorer是否仅使用边框功能？
— 彼得·赫德伯格
3
有人可以解释一下，这堂课去哪儿了？围绕textarea的div？
— koolaang '16
81

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

因此，本着这种精神，您是否尝试过添加一个应用了边框/填充的wrapper 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>
展开摘要

— 戴夫·谢罗曼（Dave Sherohman）
source
1
我最终放弃了使用％宽度。我相信您的方法也会同样有效。谢谢！
— Eric Sc​​hoonover，
5
不要忘记添加“。” 到textwrapper类。
— 克里斯·波特
3
@克里斯：谢谢，并解决了。我很惊讶有人花了将近一年半的时间……
— Dave Sherohman 2010年
2
在这种情况下，textarea的滚动条将如何显示？
— Daniel LeCheminant
1
在chrome中，当您聚焦textarea元素时，它会自动突出显示，并且如果您为div包装器创建填充，则该填充将可见，因此两个边框将可见。一个来自高亮显示，另一个来自.textwrapper边界：1px实心＃999999;
— 某人
22

让我们考虑一下向用户呈现的最终输出结果：带边框和填充的填充文本区域，其特征是单击它们会将焦点传递到我们的文本区域，以及自动100％宽度的优势典型的块元素。

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

LABEL标记会出现在我们的帮助中，因为它具有这种行为，并允许包含它必须处理的输入元素。它的默认样式是内联元素之一，因此，为标签提供块显示样式，我们可以利用自动100％宽度（包括填充和边框），而内部textarea没有边框，没有填充和100％宽度。

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

  • 不需要“ for”属性：当LABEL标记包含目标输入时，它会在单击时自动聚焦子输入；
  • 如果已经为文本区域设计了外部标签，则不会发生冲突，因为给定的输入可能具有一个或多个标签。

有关更多详细信息，请参见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; 
  }
<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>
展开摘要

.textareaContainer元素的填充和边框是我们要赋予文本区域的元素。尝试编辑它们以根据需要设置样式。我为.textareaContainer元素提供了较大且可见的填充和边框，以使您可以查看单击它们时的行为。

— 伊曼纽尔·德尔格兰德
source
不知道这里有什么跨浏览器陷阱，但是我喜欢这种方法。+1
— HRJ
15

如果您不太担心填充的宽度，则此解决方案实际上也会将填充保持为百分比。

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

并不完美，但是您会得到一些填充，宽度加起来达到100％，所以一切都很好

— qui
source
12

我在这里遇到了另一种简单的解决方案：在textarea的容器中添加padding-right。这样可以在文本区域上保留边距，边框和填充，从而避免了贝克指出的问题，即铬和野生动物园围绕文本区域放置的焦点高光。

容器的padding-right应该是textarea两侧有效边距，边框和padding的总和，再加上您可能希望容器使用的所有padding。因此，对于原始问题的情况：

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>
— 布赖恩
source
1
+1与CSS3语句相比，这将在更多的浏览器中工作。不幸的事实是，世界仍然需要包装div。
— BenSwayne 2012年
我真的很喜欢这个答案。它使textarea可以在没有小于100％的魔术百分数的情况下快速对齐。您可以在包装的所有侧面上使用填充来强制文本区域移入并保留在父区域中。最小高度和高度也必须在包装纸上为100％。然后可以使用相同的填充将textarea设置为100％，以使所有内容完美匹配。
— justdan23 '18
9

这段代码适用于IE8和Firefox

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
— 杰夫·格斯特
source
在Chrome中也可以使用。
— 桑耶夫
5

您可以使用box-sizing属性，所有主要的符合标准的浏览器和IE8 +都支持该属性。不过，您仍然需要针对IE7的解决方法。在这里阅读更多。

— z
source
@DavidJohnstone：而且，由于您不再开发IE7或更旧版本的网站，因此，这就是解决方案：)
— Jonatan Littke 2012年
2

不，您不能使用CSS做到这一点。这就是Microsoft最初引入另一种甚至更实用的Box模型的原因。最终获胜的盒子模型使混合百分比和单位变得不切实际。

我认为也不能用父级的百分比来表示填充和边框宽度。

— 丁氧
source
2

我一直在寻找内联样式解决方案，而不是CSS解决方案，这是我可以为响应文本区域做的最好的事情：

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>
— 莫志杰
source
1

如果您像这样填充和偏移它：

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

textarea的右侧与容器的右侧完全对齐，并且 textarea的完美对齐在容器中的正文中的文本......和textarea的左侧“伸出”了一下。有时更漂亮。

— 普通矛
source
1

对于使用Bootstrap的人，textarea.form-control也可能导致textarea大小调整问题。Chrome和Firefox在以下Bootstrap CSS中使用的高度不同：

textarea.form-conrtol{
    height:auto;
}
— Gwi7d31
source
1

我经常用解决这个问题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; 
}
— 耶隆·贝勒曼斯（Jeroen Bellemans）
source
0

负利润率如何？

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

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>
展开摘要

— 安特洛夫
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.