Trying to get gradient to sticky to the bottom of <body>
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);
}
加载中,请稍侯......
精彩评论