100％宽度的HTML元素问题

Question

分配一些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>

他们还有其他方法吗？

Answer 1

除了添加另一个div之外 ，解决方案很快将使用CSS 3将box-sizing属性添加到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+ */
}

Answer 2

您可以创建一个100％没有镶边（边框，填充）的容器，然后将一个块元素放在其中，使用您想要的任何颜色 - 块元素将默认填充总宽度。

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

Answer 3

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

width: calc(100% - 2px);