如何制作元素宽度：100％减去填充？

我有一个html输入。

输入有padding: 5px 10px;我希望它是父div宽度的100％（可变）。

但是，使用width: 100%;导致输入100% + 20px如何解决呢？

例

box-sizing: border-box 是一种快速，轻松的解决方法：

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

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

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

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

这就是为什么我们有box-sizingCSS。

我已经编辑了您的示例，现在它可以在Safari，Chrome，Firefox和Opera中运行。一探究竟： http //jsfiddle.net/mathias/Bupr3/ 我添加的全部是这样的：

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

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

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

填充：5％;
宽度：90％;

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

jsFiddle上的演示：

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

HTML标记：

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

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 */ 
}

使用CSS calc（）

超级简单又给力。

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

如此处所示：Div宽度100％减去固定像素
数（通过webvitaly）（https://stackoverflow.com/users/713523/webvitaly）
原始来源：http : //web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

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

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

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

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

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

现场例子

这是codeontrack.com的建议，其中包含良好的解决方案示例：

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

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

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

在此处查看示例：http : //jsfiddle.net/L7wYD/1/

只需了解width：auto;之间的区别即可；宽度：100％; 宽度：自动; 将（自动）自动计算宽度，以适合包含padding的包装div的确切宽度。宽度100％可扩展宽度并添加填充。

将其包装在容器中怎么样？容器应具有以下样式：

{
    width:100%;
    border: 10px solid transparent;
}

尝试这个：

width: 100%;
box-sizing: border-box;

对我来说，使用margin:15px;padding:10px 0 15px 23px;width:100%，结果是这样的：

我的解决方案是使用width:auto而不是width:100%。我的新代码是：

margin:15px;padding:10px 0 15px 23px;width:auto。然后元素正确对齐：

我遇到过同样的问题。像这样修复它：

width: 100%;
box-sizing: border-box;

你可以这样做：

width: auto;
padding: 20px;