试图让渐变粘到底部

Question

我试图让我的渐变粘到页面底部。如果内容需要滚动，它将正常工作...... http://jsfiddle.net/wDAQH/1/

但是当内容很短时，它需要贴在页面底部，我该如何实现呢？ html, body { min-height: 100%; }似乎没有http://jsfiddle.net/wDAQH/2/

如何将渐变到内容或屏幕的底部以哪个更大？

Answer 1

将body:after替换为html

html {
    content: '';
    display: block;
    position: relative;
    bottom: 0;
    height: 120px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0), #d6d6d6);   
}

检查http://jsfiddle.net/wDAQH/6/

处的工作示例

您可以采用的另一种方式是在<div>标记周围添加<p>包装，将height:100%添加到html,body标记，删除body:after最后将以下div属性添加到CSS

div{
    height:100%;
    width:100%;
    background: -moz-linear-gradient(top, rgba(255,255,255,0), #d6d6d6);   
}

检查http://jsfiddle.net/wDAQH/5/

处的工作示例

Answer 2

你可以试试粘性页脚 - http://ryanfait.com/sticky-footer/。

我在不同的项目中使用它，从未遇到过问题。