可能有一个简单的解决方案，但它已经困扰我很多年了…
让我解释一下情况。我有一个div的ID’container’，包含页面中的所有内容(包括页眉和页脚也)，将保持一切内联，我可以做只是一个简单的“margin：0 auto;而不是倍数。所以让我说我的#container的宽度设置为80％。现在如果我把另一个div放在相同的宽度(80％)，并给它的ID’header’与10px填充全部，布局将“打破”(可以说)，因为页面添加填充量宽度。那么，我怎么能使它保持边界而不使用方法，如更低的百分比为#header div？基本上，我想让它流动。
这里是一些例子代码，给你一个想法我在说什么…
CSS
#container {
position:relative;
width:80%;
height:auto;
}
#header {
position:relative;
width:80%;
height:50px;
padding:10px;
}
HTML
<div id="container">
<div id="header">Header contents</div>
</div>
任何人可以帮助我解决这个问题，一直在欺骗我永远？
解决方法
如果你想#header与你的容器相同的宽度，有10px的填充，你可以省略它的宽度声明。这将导致它隐式占用其整个父的宽度(因为div是默认的块级元素)。
然后，由于你没有定义一个宽度，10px的填充将正确应用于元素内部，而不是添加到其宽度：
#container {
position: relative;
width: 80%;
}
#header {
position: relative;
height: 50px;
padding: 10px;
}
你可以看到它in action here。
使用百分比宽度和像素填充/边距时的键不是在同一元素上定义它们(如果要精确控制大小)。将百分比宽度应用于父项，然后将像素填充/边距应用于display：block child，没有设置宽度。
更新
处理这个的另一个选择是使用box-sizing CSS规则：
#container {
-webkit-Box-sizing: border-Box; /* Safari/Chrome,other WebKit */
-moz-Box-sizing: border-Box; /* Firefox,other Gecko */
Box-sizing: border-Box; /* Opera/IE 8+ */
/* Since this element now uses border-Box sizing,the 10px of horizontal
padding will be drawn inside the 80% width */
width: 80%;
padding: 0 10px;
}
这里是一个帖子谈论如何box-sizing works。
