Html 如何使元素宽度：100% 减去填充？

How to make an element width: 100% minus padding?

提问by Hailwood

I have an html input.

我有一个 html 输入。

The input has padding: 5px 10px;I want it to be 100% of the parent div's width(which is fluid).

输入padding: 5px 10px;我希望它是父 div 宽度的 100%（这是流动的）。

However using width: 100%;causes the input to be 100% + 20pxhow can I get around this?

但是使用width: 100%;会导致输入成为100% + 20px如何解决这个问题？

Example

例子

回答by thirtydot

box-sizing: border-boxis a quick, easy way to fix it:

box-sizing: border-box是一种快速、简单的修复方法：

This will work in all modern browsers, and IE8+.

这将适用于所有现代浏览器和 IE8+。

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

这是一个演示：http: //jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

-webkit-box-sizing现代浏览器不需要浏览器前缀版本（等）。

回答by Mathias Bynens

This is why we have box-sizingin CSS.

这就是我们box-sizing在 CSS 中使用的原因。

I've edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/All I added was this:

我已经编辑了您的示例，现在它可以在 Safari、Chrome、Firefox 和 Opera 中使用。检查一下：http: //jsfiddle.net/mathias/Bupr3/我添加的只是这个：

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Unfortunately older browsers such as IE7 do not support this. If you're looking for a solution that works in old IEs, check out the other answers.

不幸的是，IE7 等较旧的浏览器不支持此功能。如果您正在寻找适用于旧 IE 的解决方案，请查看其他答案。

回答by Alex

Use padding in percentages too and remove from the width:

也使用百分比填充并从宽度中删除：

padding: 5%;
width: 90%;

回答by Vladimir Starkov

You can do it without using box-sizingand not clearsolutions like width~=99%.

你能做到不使用box-sizing和不清晰的像的解决方案width~=99%。

Demo on jsFiddle:

jsFiddle 上的演示：

• Keep input's paddingand border
• Add to input negative horizontal margin= border-width+ horizontal padding
• Add to input's wrapper horizontal paddingequal to marginfrom previous step

• 保持输入的padding和border
• 添加到输入负水平margin= border-width+horizontal padding
• 添加到输入的包装水平padding等于margin上一步

HTML markup:

HTML 标记：

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

CSS：

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

回答by Daan

Use css calc()

使用 css calc()

Super simple and awesome.

超级简单和棒极了。

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}?

As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

如下所示：Div 宽度 100% 减去固定数量的像素
由 webvitaly ( https://stackoverflow.com/users/713523/webvitaly)
原始来源：http: //web-profile.com.ua/css/dev/css -width-100prc-minus-100px/

Just copied this over here, because I almost missed it in the other thread.

刚刚复制到这里，因为我几乎在另一个线程中错过了它。

回答by Andology

Assuming i'm in a container with 15px padding, this is what i always use for the inner part:

假设我在一个带有 15px 填充的容器中，这就是我一直用于内部的内容：

width:auto;
right:15px;
left:15px;

That will stretch the inner part to whatever width it should be less the 15px either side.

这会将内部部分拉伸到任何宽度，它应该小于两侧的 15px。

回答by M.YPC

Here is the recommendation from codeontrack.com, which has good solution examples:

这是来自codeontrack.com的建议，其中有很好的解决方案示例：

Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div>is set to display: block (default for <div>).

不要将 div 的宽度设置为 100%，而是将其设置为 auto，并确保将<div>设置为 display: block（默认为<div>）。

回答by Felix

You can try some positioning tricks. You can put the input in a div with position: relativeand a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.

您可以尝试一些定位技巧。您可以将输入放在具有position: relative固定高度的 div 中，然后在输入上具有position: absolute; left: 0; right: 0;，以及您喜欢的任何填充。

Live example

活生生的例子

回答by Martin Jespersen

Move the input box' padding to a wrapper element.

将输入框的填充移动到包装元素。

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

See example here: http://jsfiddle.net/L7wYD/1/

请参阅此处的示例：http: //jsfiddle.net/L7wYD/1/

回答by user3849374

Just understand the difference between width:auto; and width:100%; Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding. Width 100% expands the width and adds the padding.

只需了解 width:auto; 之间的区别即可。和宽度：100%；宽度：自动；将 (AUTO)MATICALLY 计算宽度以适合包含填充的包装 div 的精确给定。宽度 100% 扩展宽度并添加填充。