help making footer stick to bottom of screen without covering content
I just added two pages to a site where people are redirected after form processing (good_url and bad_url). They have such little content on them that they don't take up the entire screen, so the footer floats up. I would like to figure out how to make the footer stick to the bottom of the screen without covering anything on more content heavy pages, or make the enclosing divs for the thankyou/error messages on these two pages expand to take up the entire screen.
Made a JSfiddle for it:
Dev site can be viewed at http://iphonebuy-host1.gaiahost.net.
If you want to see the error page try http://iphonebuy-host1.gaiahost.net/...2pgdpkf58p2di3
Thanks for looking!
Just an idea:
, so put it outside and give the footer a fixed position.
I'm not really quite sure but you can give a try.
The fact that the height of the main content is 100%
the other way I managed to resolve this issue is just expanding the width of the enclosing divs for the thankyou/error, but you don't want this solution.
Keep in mind, by placing the footer stick to the bottom, you will need to give a white background if you don't want to expand the enclosing divs for the thankyou/error, because it will place out of the main content
Hope this give you a lil' idea
Thank you for your ideas, noreplace. Actually, I wouldn't mind expanding the thankyou/error divs, I just don't know how to do it so it changes according to screen height. Is there a way to do that? Or would you just push them down far enough for it to look right on most screens?
Seems like your page is down.!!! Go to your css folder and make change to the appropriate css file as follow:
replace your "error div" with the following one
You can specify any height that best feet your needs: in px or %
Hmm, I don't think the page is down. Thanks for your suggestions but I really would prefer a solution that changes according to monitor size, resolution, etc. Maybe the only option is to use JS, though it seems like it should be possible with CSS somehow. I currently have the height of those two divs set for 29em, which looks fine on my screen but it won't look exactly right on a larger or much smaller one.
how about using
This is for the footer and use floating for the elements above...
This way, your footer will appear bellow the divs you need.
And one more thing: you may need to use for the divs above footer
I saw your page...just put back in the "main" div your footer and remove its left margin.
Last edited by ssdog; 05-28-2013 at 04:08 AM.
Thanks ssdog, but that wouldn't address the problem I'm having. I ended up using CSSstickyfooter, which is why I had to move the footer outside of the "main" div. It's working okay now, though I had to add some funky margins to certain elements to get it to look right. It's a bit hacky but I'm calling it good for now
Yeah...I wasn't payiing attention...
You could use jQuery as well...and leave the footer inside the main div
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread