CSS Div 宽度百分比和填充而不破坏布局

Question

可能有一个简单的解决方法，但它困扰了我很久了......

让我解释一下情况。我有一个 ID 为“container”的 div，它包含页面中的所有内容(也包括页眉和页脚)，它将使所有内容保持内联，我可以只执行 1 个简单的“margin:0 auto;”而不是倍数。所以假设我将#container 的宽度设置为 80%。现在，如果我将另一个具有相同宽度 (80%) 的 div 放入其中，并为其赋予“header”的 ID，并在周围填充 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>

谁能帮我解决这个一直困扰我的问题？

Answer 1

如果您希望 #header 的宽度与您的容器相同，并有 10px 的内边距，您可以省略其宽度声明。这将导致它隐式占用其整个父元素的宽度(因为 div 默认情况下是 block 级元素)。

然后，由于您尚未为其定义宽度，因此 10px 的内边距将正确应用到元素内部，而不是添加到其宽度上:

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

可以看到in action here .

关键 使用百分比宽度和像素填充/边距时，不要将它们定义在同一个元素上(如果您想准确控制尺寸)。将百分比宽度应用于父级，然后将像素填充/边距应用于未设置宽度的 display: block 子级。

---

更新

处理此问题的另一种选择是使用 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 的帖子.