CSS股利宽度百分比和填充不破坏布局

Question

有可能是这一个简单的修复，但它已经困扰了我现在的年龄......

让我说明情况。我有一个带有ID'容器'的div，它保存了页面中的所有内容（包括页眉和页脚），这些内容将保持所有内联，并且我只能执行一个简单的'margin：0 auto'。而不是倍数。因此，我们可以说我已将#container的宽度设置为80％。现在，如果我把另一个div放在同一个宽度（80％）内，并给它添加10px填充的'header'的ID，布局将会“打破”（可以这么说），因为页面会将填充量添加到宽度。那么，如何让它保持在界限内而不使用诸如#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是默认的块级元素）。

然后，因为你还没有在其上定义的宽度，填充的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。

Answer 2

尝试删除position从header，并添加overflow到container：

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
    overflow:auto; 
} 
#header { 
    width:80%; 
    height:50px; 
    padding:10px; 
}