100% 宽度的 HTML 元素问题答案

【问题标题】：The 100% width HTML element problem100% 宽度的 HTML 元素问题
【发布时间】：2011-06-06 22:10:47
【问题描述】：

当为某些 HTML 元素（如表单输入）分配 100% 宽度时 - 您不能再应用任何可能影响宽度的其他样式。 border 或 padding 之类的东西会导致元素超过 100%。这导致可能在其父元素之外的尴尬元素。

由于 CSS 不支持 width: 100% - 2px;，我知道的唯一方法是使用绝对像素宽度 (width: 98px) 或将元素 100% 切掉，这不是一个真正的选择。

<div style="overflow:hidden;">
<input style="width:100%; border: 1px solid #000;" />
</div>

他们还有其他解决方法吗？

【问题讨论】：

标签： html css dom

【解决方案1】：

与adding another div 一起，解决方案将很快使用CSS 3 将box-sizing attribute 添加到CSS 规则中。这个新的CSS 3 值已经在 IE 8 和所有其他浏览器中工作 - 所以如果你不介意跳过 IE 6 和 7，你现在可以使用它！

textarea {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

【讨论】：

有趣的是，我们所有人每次需要时都从同一个站点复制粘贴这个 css sn-p :P

【解决方案2】：

您可以制作一个 100% 没有 chrome（边框、填充）的容器，然后在其中放置一个块元素，使用您想要的任何 chrome - 默认情况下，块元素将填满总宽度。

<style>
.container {width:100%;border:0:margin:0;}
.thingy {border:1px solid black;margin:2px;background:#ddd;}
</style>

<div class="container">
  <div class="thingy">
    Both worlds?
  </div>
</div>

【讨论】：

这似乎只适用于 div 元素。但是，stackoverflow.com/questions/271067/… 显示了一种在元素周围添加另一个 div 并对其应用样式的方法。
嗯，内部元素必须是块级元素（不是inline，或inline-block）。
+1 如果我够快的话我会说什么。 :) 可能还值得注意的是，CSS3 为我们提供了box-sizing: content-box，它从计算的宽度中减去了边框和填充。
哎呀，未来的预览... 万岁 add extra divs 解决方案的死亡 :) 谢谢@RP

【解决方案3】：

这是一个老问题，但值得一提的是，从CSS3开始，你可以使用calc：

width: calc(100% - 2px);

【讨论】：