当CSS中存在填充时，如何使文本区域100%宽度而不出现溢出?

I have the following CSS and HTML snippet being rendered.

我将呈现以下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>

Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?

问题是文本区域最终比父区域宽8px(边框2px +填充6px)。是否有一种方法可以继续使用边框和填充，但将文本区域的总大小限制为父区域的宽度?

14 个解决方案

#1

605

Why not? Forget the hacks and just do it with CSS?

为什么不呢?忘了那些技巧吧，用CSS就行了?

One I use frequently:

一个我经常使用的:

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

See browser support here.

看到浏览器支持。

#2

The answer to many CSS formatting problems seems to be "add another <div>!"

许多CSS格式问题的答案似乎是“添加另一个

!”

So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):

那么，从这个意义上说，您是否尝试过添加一个包装器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>

#3

let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.

让我们考虑一下最终的输出结果，我们想要实现的是:一个带有边框和填充的padd textarea，它的特征是被单击，它们将焦点传递到我们的textarea，并且具有自动100%宽度的优势，这是块元素的典型特征。

The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support. In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).

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

The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to. Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.

标签在我们的帮助下出现，因为它具有这样的行为，允许包含它必须处理的输入元素。它的默认样式是内联元素之一，因此，给标签一个块显示样式，我们可以使用包括填充和边框在内的100%自动宽度，而内部textarea没有边框、没有填充和100%宽度。

Taking a look at the W3C specifics other advantages we may notice are:

看看W3C的具体规定，我们可能注意到的其他优势是:

no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
不需要“for”属性:标签包含目标输入时，点击时自动聚焦子输入;
if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
如果已经为textarea设计了一个外部标签，则不会发生冲突，因为给定的输入可能有一个或多个标签。

See W3C specifics for more detailed information.

请参阅W3C详细信息。

Simple example:

简单的例子:


<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> 
 
  
  
    I am the container 
    I am the padded textarea with a style border…

The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want. I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.

textareacontainer元素的填充和边框是我们想要提供给textarea的。试着编辑它们，使其符合您的要求。我为. textareacontainer元素提供了大且可见的填充和边框，以便在单击时查看它们的行为。

#4

If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..

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

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

Not perfect, but you'll get some padding and the width adds up to 100% so its all good

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

#5

I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.

我在这里遇到了另一个非常简单的解决方案:向textarea的容器中添加读操作。这样就可以保持文本区域的边距、边框和填充，从而避免了Beck指出的chrome和safari在文本区域中突出显示焦点的问题。

The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:

容器的右击应该是文本区域两边的有效边距、边框和填充的总和，加上容器可能需要的任何填充。所以，对于最初的问题

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>

#6

This code works for me with IE8 and Firefox

这段代码适用于IE8和Firefox。

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

#7

You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.

您可以使用box大小属性，它受到所有主要标准兼容浏览器和IE8+的支持。但是你仍然需要一个IE7的解决方案。点击这里了解更多内容。

#8

No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.

不，你不能用CSS来做。这就是微软最初推出另一款、或许更实用的盒子模型的原因。最终获胜的盒子模型使得混合百分比和单位是不现实的。

I don't think it is OK with you to express padding and border widths in percentage of the parent too.

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

#9

If you pad and offset it like this:

如果你像这样垫和偏移它:

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

the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.

文本区域的右边与容器的右边完美地对齐，文本区域内的文本与容器中的正文文本完美地对齐……而文本区域的左侧会伸出一点。有时更漂亮。

#10

Use box sizing property:

使用盒子大小属性:

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

That will help

这将有助于

#11

How about negative margins?

负利润怎么样?

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

#12

For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:

对于使用Bootstrap的用户，请使用textarea。表单控件还可能导致文本区域大小问题。Chrome和Firefox似乎使用了不同的高度和以下的引导CSS:

textarea.form-conrtol{
    height:auto;
}

#13

I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:

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

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

Or if you want to give the textarea a border:

或者如果你想给文本区域一个边框:

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

#14

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

#1

605