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;
}

请参阅浏览器支持here。

Answer 2

许多CSS格式问题的答案似乎是“添加另一个＆lt; div＆gt;！”

所以，在这种精神中，您是否尝试添加应用了边框/填充的包装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 specifics。

简单示例：


<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">
    I am the container
    <label class="textareaContainer">
        <textarea name="text">I am the padded textarea with a styled border...</textarea>
    </label>
</div>
</body>
</html>

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

Answer 4

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

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

不完美，但你会得到一些填充物，宽度加起来达到100％所以它很好

Answer 5

我遇到了另一个解决方案here，它非常简单：在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属性，所有符合标准的主要浏览器和IE8 +都支持它。但是，您仍然需要针对IE7的解决方法。阅读更多here。

Answer 8

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

我认为用父母的百分比来表达填充和边框宽度也不行。

Answer 9

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

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

Answer 10

如果你这样填充和偏移它：

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

textarea的右侧与容器的右侧完美对齐，和 textarea内的文本与容器中的正文文本完美对齐...以及左侧的textarea'突出'了一下。它有时更漂亮。

Answer 11

使用box sizing property：

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

这将有所帮助

Answer 12

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

textarea.form-conrtol{
    height:auto;
}

Answer 13

负利润怎么样？

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

Answer 14

我经常用edit('main.m') % ... or full path to it dbstop in main at 1 % ... or any specific file/line number of your choosing main % start script/function to start debugging it解决这个问题。你只需给textarea一个100％的宽度和一定量的填充，但是你必须减去你给textarea的100％宽度的总左右填充：

calc()

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

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

Answer 15

＆＃13;

* {
    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;
}

＆＃13;

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

＆＃13;

Answer 16

问题在于 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（在这种情况下 padding-right 和 padding-left --> 因为我们在谈论宽度）和边框（在这种情况下 border-right 和 border-left --> 因为我们在谈论宽度），这些值被添加到最终宽度。所以你的元素会比你想要的更宽。

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

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

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

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

16 个答案: