javascript - CSS 如何使背景适合整个页面长度？

Question

我的页面很长，需要用户滚动才能查看整个页面。我希望背景(它是 CSS3 渐变)延伸到整个页面长度，即使用户调整窗口大小也是如此。我正在使用另一个线程中的一些代码来执行此操作。但是，一旦我将页面切换为全屏，背景就会在底部被 chop 。我正在使用的代码如下。

function adjustBackground() {
    var pageHeight = $('html').height();
    var body = document.body,
        html = document.documentElement;

    var height = Math.max( body.scrollHeight, body.offsetHeight, 
                           html.clientHeight, html.scrollHeight, html.offsetHeight );
    document.getElementById("page-top").style.backgroundSize = "100% " + height + "px";
}
/* 
  page-top is the ID of the body. 
  The code gets the height of the page and should 
  set the height of the page to the height.
*/

$(document).ready(function(){
   adjustBackground();
});

body.onresize=function(){
    adjustBackground();
};

Answer 1

尝试将 body 和 html 元素的最小高度设置为 100%。发生的事情是 body 实际上并没有一直延伸到视口(viewport)的底部，所以背景也没有向下延伸到那里(只有 body 或 html 标签高度的 100%(如果你设置背景 w/CSS)。

您应该能够在没有任何 JavaScript 的情况下执行此操作(更适合您使用)。示例:

body, html {
    min-height: 100%;
}

body {
    background: #ccc; /* Replace "#ccc" with your css gradient */
    background-size: 100% 100%;
}

您可以使用在线工具，例如 http://www.colorzilla.com/gradient-editor/生成你想要的渐变 CSS，如果你想要一些视觉效果。