我有一个布局,我需要在 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%)。
最佳答案
不幸的是,这个结构存在很多问题,但并非所有问题都能得到解决。
背景问题
正如您自己所见,如果 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
。
关于css - 正文背景延伸到边距或在滚动时被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17424924/