html - 如何超出视口(viewport)之外的 body 高度并使内容垂直居中？

Question

我想创建一个内容垂直居中的页面(我使用的是 this method )。我需要使用两个不同的页面背景。一个分配给 html 标签，另一个分配给 body 标签(如果我创建 div 并不重要)。第一个是背景图片(视口(viewport)的全宽和高度，固定，不重复)，另一个只是一个图案，用于覆盖图片(重复)。我尝试在这种情况下使用 CSS3 的多重背景，但它并没有像我预期的那样工作。

问题在于，当内容超出视口(viewport)时，body 的背景仅覆盖视口(viewport)的高度。解决方案非常简单:

body { min-height: 100%; }

但它有一个严重的缺点。如果我在内容不超出视口(viewport)的情况下设置 min-height 值，则它不会垂直居中。

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

当主体的高度设置为 100% 并向下滚动时，尝试切换内容的高度。你会明白我在说什么。您可以通过切换 body 的高度来解决这个问题，但是一旦您将内容的高度切换回auto，它就不会再垂直居中。

我希望正文的背景覆盖整个页面高度，并且无论内容是否适合视口(viewport)，内容都位于中间。我已经尝试了几个小时来实现这一点，但我失败了，所以也许你们中的一些人知道一些我不知道的事情并且可以帮助我。

Answer 1

这是我想出的: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;