Question

我想创建一个包含垂直居中内容的页面（我正在使用this method）。我需要使用两个不同的页面背景。一个分配给 html 标记，另一个分配给 body 标记（如果我将创建div则无关紧要）。第一个是背景图片（视图端口的全宽和高度，固定，无重复），另一个只是一个图案，用于覆盖图片（重复）。我试图在这种情况下使用CSS3的多个背景，但它没有按照我的意图工作。

问题是，当内容超出视口时，正文的背景仅覆盖视口的高度。解决方案非常简单：

body { min-height: 100%; }

但它带来了严重的缺点。如果我在内容不超过视口的情况下设置 min-height 值，则不会垂直居中。

我创建了一个fiddle来帮助您更好地理解我的问题。不要介意JavaScript，因为它在这种情况下不起任何作用。我使用1x1像素背景图像作为例子。

尝试在身体高度设置为 100％时切换内容的高度并向下滚动。你会看到我在说什么。您可以通过切换正文的高度来解决这个问题，但只要您将内容的高度切换回 auto ，它就不会再垂直居中。

我希望身体的背景能够覆盖整个页面的高度，并且无论内容是否适合视口，都要将内容放在中间位置。我已经尝试了几个小时，但我失败了，所以也许你们中的一些人知道一些我不知道的东西，可以帮助我。

Answer 1

如果你不需要＆lt; IE9支持，你可以使用转换来做到这一点。

http://jsfiddle.net/0tgvrw3k/1/

基本上你不需要.block并使用top，left和transform进行垂直对齐。您需要position: fixed;，因为position: absolute;会使视口滚动。

请不要忘记在transform前加上-webkit-， - emz - ， - ms-和-o -

Answer 2

以下是我提出的问题：JSFiddle

我通过固定定位使.block div成为屏幕大小来避免您的问题。在此之后，我使用.block div滚动内部元素。希望这能解决你的问题;）。

.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    overflow-y: auto;

如何超越视口外的身体高度＆amp;内容是否垂直居中？

2 个答案: