0

我有一个布局，我需要在 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;
}

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

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

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

我可以通过...将html背景颜色设置为白色来解决这个问题，根据

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

...但是当滚动到第二页时，正文背景会被截断（这在第一个小提琴中不是问题）。

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

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

任何涉及从 html、body 或 wrapper 中删除 height: 100% 声明的解决方案都会折叠布局（包括替换为 max-height: 100%）。

4

2 回答 2

2

不幸的是，这种结构存在很多问题，并非所有问题都可以解决。

背景问题

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

浮动问题

当一个元素浮动时，它不会影响其父元素的高度。所以它们不会生长（例如身体不会膨胀）。如果您可以使用替代方案，则可以解决此问题。对于垂直居中的元素，您可以使用display: table-cell例如，它允许您垂直居中内容。

身高问题

这是所有希望都消失的地方。height: 100%当然是指父母的身高。bodyis的父级html又是视口的子级。您给出html了100%（=视口的大小）body的大小和100%（=视口的大小）的html大小。

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

于 2013-07-02T18:08:16.860 回答
0

As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.

In order to center your background-image to the <html> you can specify the position as 50%. This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.

于 2013-07-02T12:12:18.243 回答