CSS Div宽度百分比和填充没有打破布局
这可能有一个简单的解决方法，但它已经困扰了我很多年了…
让我解释一下情况。 我有一个ID“容器”的div，其中包含页面中的所有内容（包括页眉和页脚），将保持一切内联，我可以做一个简单的'margin：0 auto'。 而不是倍数。 所以我们可以说，我把#container的宽度设置为80％。 现在，如果我把另外一个div放在里面，宽度相同（80％），给它一个填充10px的'header'的ID，布局就会“打破”（可以这么说），因为页面会把填充量添加到宽度。 那么，我怎样才能让它停留在边界，而不使用诸如#header div的低百分比等方法呢？ 基本上，我想让它变得stream畅。
下面是一些示例代码，让您知道我在说什么…
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与您的容器宽度相同，使用10像素的填充，则可以忽略其宽度声明。 这将导致它隐式地占用其整个父宽度（因为div是默认的块级元素）。
然后，因为你没有定义宽度，所以10px的填充将被正确应用在元素内部，而不是增加宽度：
#container { position: relative; width: 80%; } #header { position: relative; height: 50px; padding: 10px; }
你可以在这里看到它的行动 。
使用百分比宽度和像素填充/边距时的关键是不要在同一个元素上定义它们（如果要精确控制大小）。 将宽度百分比应用于父级，然后将像素填充/边距应用于未设置宽度的display: block子级。
更新
处理这个问题的另一个select是使用盒子大小的 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; }
这里有一篇文章讨论如何使用盒子尺寸 。
尝试从header删除position并添加overflow到container ：
#container { position:relative; width:80%; height:auto; overflow:auto; } #header { width:80%; height:50px; padding:10px; }
