0

I have found a lot of similar questions on SOF but unfortunately they all relate to : how to make a sticky footer. I'm not trying to make my footer appear at the bottom of the page at any time (I mean : no matter where the user is in the page).

Actually what I'm trying to achieve is very simple but I couldn't find a solution. I have many pages that do not have a lot of text, so currently the footer is something like one line after the end of the text and there is a big blank at the bottom of the page. I would like that the footer be at the bottom of the page if there is only a few text of the page.

I have to put this on my footer class :

height : 100%

and then this

margin-top: 100%

And some other stuff, but it didn't make it.

Thank you !

tobiak777
  • 3,175
  • 1
  • 32
  • 44
  • 2
    possible dup of: http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom/9090522#9090522 – 13ruce1337 Jun 07 '14 at 05:50
  • Thanks, I'm checking if it relates to the same problem – tobiak777 Jun 07 '14 at 05:53
  • Yes, the answers provided therin indeed solved my problem, thank you @13ruce1337 . I used the solution provided by Hashbrown (The concept is to use css properties to make the main content present like a table and the footer present like a row-table and then set the vertical positioning of the footer to 'bottom'. – tobiak777 Jun 07 '14 at 06:12
  • There are so many questions about sticky footers that I missed this one. Thank you everybody for your answers. – tobiak777 Jun 07 '14 at 06:12

4 Answers4

2

If you want your footer to always be at the bottom of the page, then you will have to specify a value for height for the 'content' section of your page. This will force your footer to always be at the bottom. Try something like this:

height: 800px

for the div that represents your content.

OR

Use Absolute positioning

Apply this to your footer.

.footer {
   position:absolute;
   bottom: 0px;
}

You can see this here: http://jsfiddle.net/892JK/

Just observe that its the above two properties namely position: absolute and bottom:0px that make it always 'stick' to the bottom of the page.

This is quite similar to 'sticky' header concept where the concept is, errm, looked at the opposite way i.e. the properties would be modified as these for sticky header

.stickyHeader {
   position:fixed;
   top: 0px;
}

Hope this helps!!!

Satwik Nadkarny
  • 5,086
  • 2
  • 23
  • 41
  • The problem with your solution is this: http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom/9090522#9090522 – Fr0zenFyr Jun 07 '14 at 06:01
  • @Fr0zenFyr I know that. Which is why I gave two solutions AND differentiated them with the word OR. – Satwik Nadkarny Jun 07 '14 at 06:06
  • Unfortunately, first one is far from a valid solution. check http://jsfiddle.net/892JK/1/ to see that it doesn't work for varying screen sizes. – Fr0zenFyr Jun 07 '14 at 06:12
  • @Fr0zenFyr Your fiddle is wrong. It doesn't implement my solution if that was your idea to begin with. Let me create a fiddle to demonstrate this. – Satwik Nadkarny Jun 07 '14 at 06:15
  • Thank you, I actually used the answer provided here stackoverflow.com/questions/526035/… (Answer of Hashbrown) but I first tried your answer and it was working as expected. The only problem is that it is additing extra-blank at the end of the page unless the min-height provided exactly match the height of the user screen. That's why Hashbrown answer is the best way to go ! – tobiak777 Jun 07 '14 at 06:16
  • @Fr0zenFyr Try this http://jsfiddle.net/b4CG6/ Just play with this by increasing the height and you'll observe that the footer will always stay at the bottom of the page. – Satwik Nadkarny Jun 07 '14 at 06:19
  • That just adds color to the divs. My point was you can never guarantee that the screen height will be `800 px;` for all users. For smaller screens, there will be an unnecessary scroll. What if the content was bigger than `800 px;`, see this [modified fiddle](http://jsfiddle.net/b4CG6/1/) from your reference for example. – Fr0zenFyr Jun 07 '14 at 06:25
  • Anyway, we can leave the discussion by agreeing to disagree with each other. I just couldn't accept that this CSS can be used on any page with different quantities of content. No offense. Cheers! – Fr0zenFyr Jun 07 '14 at 06:29
  • @Fr0zenFyr Hmm, so you have decided to crucify me for 800px. Just kidding!!! I only gave 800px as an arbitrary value. I did not mean it to be taken literally. If you read my answer above I said "Try something like this". My intention was to give him the idea not the code :) – Satwik Nadkarny Jun 07 '14 at 06:29
  • I agree. I just meant that `n px;` will not work for all pages. :) – Fr0zenFyr Jun 07 '14 at 06:30
  • No offense taken, mate!! – Satwik Nadkarny Jun 07 '14 at 06:31
2

You can use min-height property in style-sheet for a particular div in which you have place content, just before footer.

<div class="textclass">
 <p> 
 Text or content
 ..........
 </p>
</div>

<footer>
............
</footer>

CSS:

.text-class{
min-height:700px; /*adjust height at your end */
}
Sharanpreet
  • 381
  • 1
  • 2
  • 12
  • Thank you, I actually used the answer provided here http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom/9090522#9090522 (Answer of Hashbrown) but I first tried your answer and it was working as expected. The only problem is that it is additing extra-blank at the end of the page unless the min-height provided exactly match the height of the user screen. That's why Hashbrown answer is the best way to go ! – tobiak777 Jun 07 '14 at 06:15
1

I have used this method: http://ryanfait.com/sticky-footer/

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's       height */
}
.footer, .push {
  height: 155px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
Corey
  • 2,453
  • 4
  • 35
  • 63
0

You will have to specify a fixed height of the main div containing the body elements and then specify the footer.it will always show after the specified height.

gomzy
  • 250
  • 1
  • 2
  • 10