与粘性页脚的梯度背景

Nat*_*oos 2 css sticky-footer

我正在尝试为身体背景添加渐变,该渐变从白色开始,在页面底部以灰色结束.由于页面具有粘性页脚,当内容大于浏览器窗口时,主体不会随内容拉伸/展开.所以渐变在中间停止.有人可以帮忙吗?

HTML:

<html>
    <body>
        <div class="content"> </div>
        <div class="footer"> </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

html {
    height:100%;
}
body { 
    height:100%;
    background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
}
.content {
    min-height: 100%;
}    
.footer {
    height: 55px;
}
Run Code Online (Sandbox Code Playgroud)

Leo*_*ris 5

背景附件:固定;

将其添加到您的身体CSS.

在旁注中你可能已经知道了这一点但是:background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);将无法在IE上运行.此属性仅适用于基于Mozilla的浏览器.

跨浏览器CSS渐变... http://webdesignerwall.com/tutorials/cross-browser-css-gradient