宽度：100％ – 填充？
我有一个htmlinput。
input有padding: 5px 10px; 我希望它是父div的宽度的100％（这是stream体）。
但是使用width: 100%; 导致input是100% + 20px我怎么能解决这个问题？
例
在这里阅读其他答案，或阅读这个答案： 宽度设置为100％时，div的内容是否比div更长？
box-sizing: border-box是一个快速，简单的方法来解决它：这将适用于所有现代浏览器和IE8 +。
这是一个演示： http : //jsfiddle.net/thirtydot/QkmSk/301/
.content { width: 100%; box-sizing: border-box; }
如果你需要这个工作在IE7中，你可以阅读这个答案的旧版本 。
这就是为什么我们在CSS中有box-sizing 。
我编辑了您的示例，现在可以在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的解决scheme，请查看其他答案。
使用百分比填充，并从宽度中删除：
填充：5％; 宽度：90％;
你可以做到这一点，而不使用box-sizing和不清晰的解决scheme，如width~=99% 。
演示jsFiddle ： 
- 保持input的
padding和border - 添加到input负水平
margin=border-width+horizontal padding - 添加到input的包装水平
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宽度减去固定数量的像素
通过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;
这将拉伸内部的任何宽度应该less于15px任何一方。
干杯
安迪
你可以尝试一些定位技巧。 你可以把input放在一个div的position: relative和一个固定的高度，然后在input上有position: absolute; left: 0; right: 0; position: absolute; left: 0; right: 0; ，以及任何你喜欢的填充。
现场示例
这是来自codeontrack.com的推荐，它有很好的解决scheme例子：
将div的宽度设置为100％，将其设置为auto，并确保将
<div>设置为display：block（默认为<div>）。
将input框的填充移动到包装元素。
<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/
只要了解宽度的差异：auto; 和宽度：100％; 宽度：自动; 将（自动）马上计算宽度，以适应包装的div包括填充确切的给定。 宽度100％展开宽度并添加填充。
把它裹在容器里怎么样？ 容器应具有如下风格：
{ width:100%; border: 10px solid transparent; }
尝试这个：
width: 100%; box-sizing: border-box;
我遇到过同样的问题。 像这样修复它：
width: 100%; padding: 5px; /*--------------Now remove from padding what you've added---------------*/ margin:-5px;
干杯
你可以这样做：
width: auto; padding: 20px;
