CSS Div宽度百分比和填充，如何不破坏布局？

Question

可能有一个简单的解决方法，但这个问题困扰我许久...

让我解释一下情况。我有一个带有ID“container”的div，它包含页面中的所有内容（包括页眉和页脚），可以使所有内容都保持在同一行，只需使用一个简单的“margin:0 auto;”就可以实现，而不是多个。所以假设我将#container的宽度设置为80%。现在，如果我在里面放置另一个宽度相同（80%）的div，并给它一个名为“header”的ID和10像素的padding，布局会“破裂”（这么说吧），因为页面将padding数量添加到宽度中。那么，我如何在不使用诸如较低百分比的#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>

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

- Kyle Ross

Answer 1

如果您希望#header与容器宽度相同，并具有10px的填充，则可以省略其宽度声明。这将导致它隐式地占用其父元素的整个宽度（因为div默认是块级元素）。

然后，由于您没有对其定义宽度，因此10px的填充将正确应用于元素内部，而不是添加到其宽度中：

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

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

你可以在这里看到它的实现。

使用百分比宽度和像素填充/边距的关键在于不要在同一元素上定义它们（如果您想准确地控制大小）。将百分比宽度应用于父元素，然后在未设置宽度的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如何工作的帖子。

- Pat

Answer 2

你也可以使用CSS的calc()函数，从容器宽度的百分比中减去填充的宽度。

例如：

width: calc((100%) - (32px))

请确保减去的宽度等于总填充量，而不仅仅是一半。如果您在内部div的两侧都使用了16px的填充，则应从最终宽度中减去32px，假设下面的示例是您想要实现的内容。

.outer {
  width: 200px;
  height: 120px;
  background-color: black;
}

.inner {
  height: 40px;
  top: 30px;
  position: relative;
  padding: 16px;
  background-color: teal;
}

#inner-1 {
  width: 100%;
}

#inner-2 {
  width: calc((100%) - (32px));
}

<div class="outer" id="outer-1">
  <div class="inner" id="inner-1"> width of 100% </div>
</div>

<br>
<br>

<div class="outer" id="outer-2">
  <div class="inner" id="inner-2"> width of 100% - 16px </div>
</div>

- Ian Gradert

Answer 3

尝试将header中的position移除并加入container的overflow属性。

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

- Sarfraz