CSS 达到最大宽度后水平填充百分比与元素无关？

Question

我正在开发我的新投资组合网站 (http://www.marcial.is)，我对一个我无法解释的填充问题感到困惑。我构建布局的方式是每行内容都包含一个外包装和一个内包装。例如：

<header class="global-header" role="banner">
    <div class="header-inner">...</div>
</header>

外包装纸为 100% 宽。内包装有一个 max-width，以 margin auto 居中。内部包装器也有一定百分比的填充，以允许我在每一行中看到我看到的内容（例如上面的 header 示例）。这里有一个我的 SCSS 的例子来说明：

.global-header {
    background: #007bc4;
    text-align: center;
    text-shadow: 0 1px 1px rgba(#000, 0.2);
    border-bottom: 1px solid rgba(#000, 0.15);
    padding: 1.25em 0.625em 2.5em;
    @include at-break($breakMedium) {
        padding: 3.125em 1.25em 6.25em;
    }
    @include at-break($breakLarge) {
        padding: 3.125em $gutter 6.25em;
    }
}

.header-inner {
    max-width: $maxWidth; 
    margin: 0 auto;
    @include at-break($breakSmall) {
        margin: 0 18.181818181818%;
    }
    @include at-break($breakMedium) {
        margin: 0 11.764705882353%;
    }
    @include at-break($breakLarge) {
        margin: 0 17.391304347826%;
    }
}

问题是内包装上的填充百分比似乎继续增加，尽管内包装已经达到应用 max-width。如果已经达到 max-width，为什么内包装的填充会随着视口宽度继续增加？

Answer 1

Why would the padding of the inner wrapper continue to increase with the viewport width if the max-width has been achieved?

因为，http://www.w3.org/TR/CSS21/box.html#padding-properties:

The percentage is calculated with respect to the width of the generated box's containing block, […]

你的外部 div 在这里提供 containing block。

您需要在此处 .header-inner 内使用一个附加元素，并将填充应用到 that，以便 .header-inner 具有 max-width set 成为该内部元素的包含块。

CSS 达到最大宽度后水平填充百分比与元素无关？

CSS Percentage Horizontal Padding Not Relative to Element After Achieving Max Width?

html

css

padding

viewport