HTML. Getting footer to take up the rest of the bottom screen

numerical25

I designing a site and the height of the content does not exceed the height of the monitor so when you look at the bottom of the screen you see white space. The footer is grey so you can see exactly where the footer stops. I want the footer to take up the remainder of the space below it but its not working. Here is what Ive done and what I cant do

The footer is not nested within anything so I tried setting height to 100%. Didnt work

I can't make the body's background color grey and just make everything else a different color because I already have the body's header as a color so that won't work either.

does anyone have any suggestions ??

NogDog

It kind of depends on how your page is structured, but one possibility is to assign a height of 100% to the body. This is because a percentage height for the footer can only be calculated if the containing element has a known height.

Another solution might be some sort of background image 1px high and as wide as the footer with the same color as the footer's background. Then assign it to the body with repeat-y and positioned horizontally where the footer is.

numerical25

Yea I don't the 100% attribute works for the body, I dont even think it works period. Otherwise it would be easy to may side bar navigations. its a worthless attribute.

numerical25

I figured it out.

What I did is a created another wrapper to cover everything else (That is all the content that is wrapped within it) then I applyed the background image that I had for my header and applyed a white background to that wrapper. that way the image that i have for my header is working and the white background is for the rest of the background that is below my header. When you apply a background color and background image to the same wrapper, the background image always stays on top. then i applied the color of my footer to the body and now my footer is covering the rest.