Css 高度之谜

Question

我试图复制在路径中看到的布局:https://path.com/i/M2lzb

正如您在布局 css 中所见:

html, body { margin: 0; padding: 0; }
html { min-height: 100%;position: relative; }
body { }

他们以某种方式设法在 body 上获得 100% min-height 的行为，而无需固定 html 高度。我试图复制它，但它只有在我设置 html { height: 100% } 时才有效，当我这样做时，它会在布局需要滚动时打破背景(在小高度上它会被截断).

我已经禁用了 javascript & 它仍然可以在路径网站上工作所以它看起来像是 100% css。

我曾尝试复制该行为，但没有成功(我确实复制/粘贴了所有路径的 css!)。

http://jsfiddle.net/J9fgc/2/

他们是如何实现这种效果的？

Answer 1

这在您链接的网站中起到了作用:

.background {
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}