Trying to get gradient to sticky to the bottom of <body>_问答_开发者

Trying to get gradient to sticky to the bottom of <body>

开发者 https://www.devze.com 2023-02-17 03:32 出处：网络

I am trying to get my gradient to sticky to the bottom of the page. It will work ok if the content requires scrolling ... http://jsfiddle.net/wDAQH/1/

相关专题：css

I am trying to get my gradient to sticky to the bottom of the page. It will work ok if the content requires scrolling ... http://jsfiddle.net/wDAQH/1/

but when the content is very short, it needs to stick to the bottom of the page, how can I acheive it? html, body { min-height: 100%; } doesn't seem to do the trick http://jsfiddle.net/wDAQH/2/

How can I get the gradient to the bottom of the content or 开发者_JS百科screen whichever is larger?

You could try sticky footer - http://ryanfait.com/sticky-footer/ .

I used it on different projects and never had problems.

Replace body:after with html

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

Check working example at http://jsfiddle.net/wDAQH/6/

Another way you can do it is Put a <div> wrapper around the <p> tags, Add height:100% to your html,body tags, remove body:after And finally add the following div properties to your CSS

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

Trying to get gradient to sticky to the bottom of <body>

Check working example at http://jsfiddle.net/wDAQH/6/

Check working example at http://jsfiddle.net/wDAQH/5/

精彩评论

关注公众号

热门标签

图文推荐

Trying to get gradient to sticky to the bottom of <body>

Check working example at http://jsfiddle.net/wDAQH/6/

Check working example at http://jsfiddle.net/wDAQH/5/

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：