Jump to content

Pushing The Footer To The Bottom Of The Page


Demiscient
 Share

Recommended Posts

I've tried multiple tutorials on the net. At least 8 of them (and that's quite a lot of different ways to accomplish something that shouldn't be this damned hard in the first place!) and they don't work for my web app. I don't know whether to post this in the jquery section, the css section, the html section, or all three, because I don't know where the problem is. http://endemicdesigns.com/ As you can see, the footer is still floating somewhere midway up the page (for me anyways, it depends how big your monitor is I guess). I am assuming none of the above fixes work because there is either something clashing in the jquery mobile css I have been given... or because the pages are all in one single html file (so that on mobile phones, when you click to go to the next page, it slides across to the next one instead of reloading). Either way, I don't know what the problem is and I don't know how to fix it. If anyone has developed a web app and successfully shoved the footer to the bottom of the page, I'd love to know how you did it because it's driving me batty! Demi

Link to comment
Share on other sites

Well from the looks of it, it could be because the content is not taking up the available height of the browser/screen. Try giving your content area(s) a fixed height and see if your footer is pushed down. If its pushed too down, you'll most likely get the vertical scroll bars on the side. Fixed height really isn't a good idea anyway because your content maybe bigger or may expand to get bigger than the specified height. But for testing purposes you can give it a try. However, if you know your height is going to be the same for all pages, meaning it won't expand to get bigger, than yeah you can make it a fixed height. Other than that, I don't know what it could be... :)

Edited by Don E
Link to comment
Share on other sites

There's a technique called "sticky footer." The idea is to have a wrapper around all your content, and have the footer outside of the wrapper. The wrapper is given 100% height (the <html> and <body> elements too) and the footer is given a negative top margin equal to its height. Inside the wrapper, right at the bottom, is an empty element that's equally as tall as the footer. HTML:

<div id="wrapper">  Content goes here.  <div class="padding"></div></div><div id="footer">Footer</div>

CSS:

html,body {  margin: 0;  padding: 0;  height: 100%;}#wrapper {  min-height: 100%;}#footer {  height: 80px;  margin-top: -80px;}.padding  {  height: 80px;}

Edited by Ingolme
changed height to min-height
Link to comment
Share on other sites

Okay, I've re-uploaded it with the code added (but only applied it to the first page). I changed "footer" to "footing" in both the css and the html because I was worried there would be something conflicting in the other css file. edit: You can see it in action at the original address.

Edited by Demiscient
Link to comment
Share on other sites

I can't change the persnickety wrapper element to end before the footer because the site breaks and the footer vanishes--but somehow leaves a shadow in the place where it used to be that extends from midway up the page (roughly) to the very bottom of the page. edit: I reuploaded to show you what I mean.

Edited by Demiscient
Link to comment
Share on other sites

When I removed the absolute positioning from your code, the footer was working just fine. The problem is that you've put the footer inside the "Persnickety" element again. Keep it outside.

Link to comment
Share on other sites

Okay. Okay. I've edited and reuploaded again. I feel like I'm unintentionally trolling you when I say this but I can't get it to work. I've closed off the Persnickety div before the footer. I've removed the absolute positioning. I've given the footer the id of "footing". And the CSS has remained the same (asides from removing the aboslute positioning).

Link to comment
Share on other sites

Your "Persnickety" element has a min-height in the style attribute that shouldn't be there. And, I also made a mistake in my earlier code. The #Persnickety element shouldn't have a height property, but a min-height property of 100% Adding overflow: hidden; to the footing will prevent the margins of the <h4> element from pushing the fotting further down than it should be.

Link to comment
Share on other sites

Reuploaded.. You should know I'm borderline between laughing my head off and bursting into tears here. Changing the property to min-height instead of height doesn't do anything different from what I can visibly percieve, regardless of whether I additionally use Firebug to disable the style.element's min-height of some random number. I can't get rid of it in the code because it's not actually written anywhere in the code.. edit: And the footer still isn't displaying.

Edited by Demiscient
Link to comment
Share on other sites

Oh jeez. The footer was perfectly styled before I started messing with code to push it down, is there not a way to just push it to the bottom without having to style it AGAIN? Not only that but there's still an everpresent shadow looming (literally, looming) that starts at the bottom of the content and stretches to the bottom of the page. Thanks for your help and I don't want to seem ungrateful that you've stayed here to guide me through your method, but I've already spent hours trying to interpret your instructions and I'm not going to on top of that spend hours trying to redo the footer styling from various different sections of the code in the three different CSS files that are styling the site, figure out why the gradient in the background is suddenly sitting on top of the bottom half of the screen, and try and get rid of the 10px high block of white nothingness that is now sitting at the bottom of my page.

Link to comment
Share on other sites

All you have to do is replace the temp "footing" element with original you had so the styling for that will return. you can force the overwriting of the min-height styling by using !important, and comment out the border, but the background image does not seem to tile correctly

#Persnickety {min-height: 100% !important;}.ui-body-b {background-image: url("bg.png"), -moz-linear-gradient(center top , #B7ADC4, #DFD7ED);/*border: 1px solid #C6C6C6;*/color: #333333;font-weight: normal;text-shadow: 0 1px 0 #FFFFFF;}

Link to comment
Share on other sites

It's okay, I'm done, seriously done, with trying to do it that way, I mean obviously it doesn't work, it just doesn't. In the past when I've pushed my footers down, it's never broken that badly and I'm sick of trying to fix all the errors that stop the footer from being pushed down. I'm trying to look for a way to do it with Javascript now, but all I see is sticky footers (i.e. the footers that stick to the bottom of the viewpanel like an everpresent toolbar or something), so I'm not having much luck. edit: If I continue to do it that way my stress levels will skyrocket so high that my hair will automatically jump out of their follicles on my head. I am already pretty close to reaching that level already. :sorry:

Edited by Demiscient
Link to comment
Share on other sites

I believe I'd rather jump in a lake ( Filled with bears. And bees. And bears shooting bees out of their mouth as they chase after you. ) than have any more involvement with trying to fix what is a not-very-well-suited method to my circumstances (or rather my code's circumstances). Lol I'm very sorry but I'm not going to go near the last method with a ten foot barge pole. I don't know enough CSS to be able to fix the million bugs that pop up from that method. I'm probably just going to have to put up with it, unfortunately.

Link to comment
Share on other sites

It's okay, I'm done, seriously done, with trying to do it that way, I mean obviously it doesn't work, it just doesn't. In the past when I've pushed my footers down, it's never broken that badly and I'm sick of trying to fix all the errors that stop the footer from being pushed down. I'm trying to look for a way to do it with Javascript now, but all I see is sticky footers (i.e. the footers that stick to the bottom of the viewpanel like an everpresent toolbar or something), so I'm not having much luck. edit: If I continue to do it that way my stress levels will skyrocket so high that my hair will automatically jump out of their follicles on my head. I am already pretty close to reaching that level already. :sorry:
But! as i far as i know Javascript does not work for mobiles, unless that changed recently?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...