Question

我有一个布局，我需要使用高度：100％的html和body（以及我使用的任何包装器div）来实现类似于页面的效果，以便我的第一个＆＃34;页面上的内容＆＃34;居中，向下滚动第二个＆＃34;页面上的内容＆＃34;是中心等。

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;
}

你可以在这个小提琴中看到它：

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

问题是身体背景（这里我只是使用颜色，但在我的网站上它将是一个图像）泄漏到身体边缘，即身体内容有一个最大宽度，应该居中有白色边缘。

我可以通过...将html background-color设置为白色来修复它，按照

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

...但是当滚动到第二页时，身体背景变得截止（这不是第一个小提琴中的问题）。

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

（见：http://jsfiddle.net/terraling/3V5rV/1/）

任何涉及移除高度的解决方案：来自任何html，body或包装器的100％声明都会折叠布局（包括替换为max-height：100％）。

Answer 1

这个构造存在很多问题，遗憾的是并非所有问题都能解决。

背景问题

如果body没有背景，您已经看到html的背景延伸到视口。这是可以解决的。

浮动问题

当一个元素浮动时，它不会影响其父元素的高度。所以它们不会长大（例如身体不会扩张）。如果你可以使用替代品，这可以解决。对于垂直居中的元素，您可以使用display: table-cell，例如，它允许您垂直居中内容。

身高问题

这是所有希望都消失的地方。当然，height: 100%是指父母的身高。 body的父级是html，后者又是视口的子级。您提供的html大小为100%（=视口大小），body大小为100%（= html大小=视口大小）。

所以现在body有一个固定的高度，它不能扩展意味着背景也不会扩展。现在有人可能会认为body没有大小可以扩展。但.page也有100%。如果父级（在这种情况下为body）没有固定大小100%没有任何意义，将被视为auto，这意味着与内容一样大。内容的高度为300px。因此，.page元素不再具有视口的高度，而是300px。

Answer 2

对于CSS的崩溃，您应该专门指定高度height:200px;或者在页面的底部/顶部添加填充以便内容包装。您也可以使用min-height:200px;，然后添加margin-bottom:20px;以分隔页面。我会在具有特定background-image和bottom-margin的包装器的特定高度处理此问题。

为了将背景图像居中到<html>，您可以将位置指定为50％。这可以通过执行background:url('yourimage.jpg') repeat 0 50%;来完成。这将确保背景居中。

车身背景延伸到边距或滚动时截止

2 个答案:

背景问题

浮动问题

身高问题