css - 正文背景延伸到边距或在滚动时被截断

Question

我有一个布局，我需要在 html 和 body(以及我使用的任何包装 div)上使用 height: 100% 来实现类似于页面的效果，以便我的第一个“页面”上的内容居中，向下滚动第二个“页面”上的内容居中等。

html 看起来像这样:

<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
    <div class="inner">
        Some content
    </div>
    <div class="inner">
        Some content
    </div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
    <div class="inner">
        Some content
    </div>
    <div class="inner">
        Some content
    </div>
</div>
</section>

以及通过这种样式实现的垂直居中等:

body, .page {height: 100%; margin: 0 auto;}

.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}

你可以在这个 fiddle 中看到它在工作:

http://jsfiddle.net/terraling/3V5rV/

问题是正文背景(这里我只是使用颜色，但在我的网站上它将是图像)泄漏到正文边缘，即正文内容具有最大宽度并且应该以白色居中边距。

我可以通过...将 html background-color 设置为白色来解决这个问题

http://jsfiddle.net/terraling/yM53t/

...但是当滚动到第二页时正文背景会被截断(这在第一个 fiddle 中不是问题)。

或者，我可以将背景图像设置在包装器 div 上而不是主体上。这解决了它泄漏到主体边缘的问题，但它仍然存在滚动时被切断的问题。

(参见:http://jsfiddle.net/terraling/3V5rV/1/)

任何涉及从任何 html、正文或包装器中删除 height: 100% 声明的解决方案都会折叠布局(包括替换为 max-height: 100%)。

Answer 1

不幸的是，这个结构存在很多问题，但并非所有问题都能得到解决。

背景问题

正如您自己所见，如果 html 没有背景，则 body 的背景会延伸到视口(viewport)。这是可以解决的。

float 问题

当元素 float 时，它不会影响其父元素的高度。所以它们不会生长(例如 body 不会膨胀)。如果您可以使用替代方案，就可以解决这个问题。要使元素垂直居中，您可以使用 display: table-cell，例如，它允许您将内容垂直居中。

高度问题

这就是所有希望破灭的地方。 height: 100% 当然是指父级的高度。 body 的父元素是 html，它又是视口(viewport)的子元素。您为 html 设置了 100% 的大小(= 视口(viewport)的大小)，为 body 设置了 100% 的大小>(= html 的大小 = 视口(viewport)的大小)。

所以现在 body 有一个固定的高度，它不能展开，这意味着背景也不会展开。现在有人可能会想到不给 body 大小，以便它可以扩展。但是 .page 也有 100%。如果父级(在本例中为 body)没有固定大小 100% 没有任何意义，将被视为 auto，这意味着一样大作为内容。内容的高度为 300px。所以 .page 元素将不再具有视口(viewport)的高度，而是 300px。