RWD - 宽度为100％的元素

Question

我试图创建我的网站的移动版本，但宽度为100％和填充的任何元素都会溢出到我的容器部分。我明白这是因为子元素比填充值的容器更宽，但是我怎样才能保持它们的全宽，但是在子元素内保留了一些填充（因此文本不会粘在浏览器的窗口中）？

简单代码：

section#main { 
    padding: 100px 0 0 !important; 
    width: 100%; 
    } 
    input, textarea { 
    width: 100%; 
    padding-left: 20px; 
    margin: 0; 
    } 

结果：

http://tinypic.com/r/2ytxjk9/5

Answer 1

正如你基本上是说，100％的宽，但加上100像素填充。最简单的解决方法是更改​​box-sizing: border-box CSS3属性。这将使它100％宽，包括100px填充。