Question

I have a background gradient and it looks great but I have one problem, on short pages the background is too long and causes unnecessary scroll bars and on long pages the background will start to repeat instead of stretching to fill the entire page.

Here is the CSS I am using:

html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
margin: 0;
padding: 0;
text-align: justify;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 25%, rgba(209,209,209,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(0,0,0,1)), color-stop(100%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */

}

When I add height: 100%; it causes scroll bars on short pages. I attempted to remove them by using overflow: hidden; but that caused any content on long pages to not show! Also if I do not use height: 100%; then the gradient only fills about half the page and repeats.

I am a bit perplexed as to what to do or try to solve this issue.

Note: While I would prefer a CSS solution, if there is a javascript solution (using jQuery) that works I would be willing to attempt that to get this to work.

Answer 1

What caused this issue was my attempt to implement a “Sticky Footer”. I removed all height requirements (IE: min-height and height) and the browser adjust accordingly without issue.

As a side-note, I used the following code to solve my sticky footer issue:

$(function() {
    var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
    $("#page-content").css("min-height",height+"px");
});