sticky-footer/expanding content box question

[EricM]

This has probably been covered somewhere else already, but I haven’t been able to find it. I’m using a sticky footer method, and it seems fine, but I can’t get the content box to expand down to the footer. I used to use repeating images to fix this, but I’m trying to be all css now. Link

[EricM]

Also, the body background is the size of the window, not the size of the page. Here is a longer page to demonstrate.

[timmey]

for you body problem, you could try adding overflow:auto; to your body {}

[EricM]

Thanks. That seems to work, though I still have some bugs, I think because I’m using html5 boilerplate for the first time and need to tweek it. Still trying to figure out the expanding content thing now.

[timmey]

sorry, just realised that you have 2 scrollbars now..

for me it just worked, when you remove overscroll:auto from body {} and add your gradient to .wrap

body > .wrap {

height: auto;

min-height: 100%;

background: #26382b; /* Old browsers */

background: -moz-linear-gradient(top,  #26382b 0%, #354f3c 0%, #000000 100%, #000000 100%); /* FF3.6+ */

...

}

[EricM]

Thanks Timmey, that worked great! I wouldn’t have thought of that, and I still don’t understand why that works. Maybe my other problem will be solved by applying a horizontal gradient and width to the .pad-bottom element. Trying that next.

[EricM]

Damn! Applying a background to the .pad-bottom element didn’t work. At least my footer is sticky, it seems. Any other ideas?

[EricM]

Well, sod it. I can’t figure out a way of doing this without extra mark-up or adding an unnecessary image. I’ll just round off the bottom corners and be done with it for now, if I figure it out I’ll share.

[Author]

Posts