0

I realise this question has been asked before but I have tried

footer{
position: absolute;
bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}

html, body {
min-height: 100%;
padding: 0;
margin: 0;
}

I have also tried a CSS tricks method https://css-tricks.com/snippets/css/sticky-footer/

None of these options have worked for me (or at least not for very-large screen). What else can I try? Thanks

olliew
  • 183
  • 1
  • 7

3 Answers3

1

Try this:

footer{
position: absolute;
bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}

html, body {
min-height: 100%;
padding: 0;
margin: 0;
position:relative;
}
Pierre.Vriens
  • 2,117
  • 75
  • 29
  • 42
einsh10
  • 314
  • 1
  • 8
0

You are missing various styles that are essential to applying a 'sticky footer'. This is how i've always done it

DEMO https://jsfiddle.net/zmbh0v4z/

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
  background: red;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
  • @jbutler483 His code will not work well in all cases. It is simply positioned absolute, nothing else. As soon as enough content is added to the page to make it scroll the footer will be overlayed with content - in theory. – Kevin Lynch Apr 29 '16 at 22:49
  • Which, in theory, should work. I'm not saying anything about overlaying content, as OP has not said anything about what's actually wrong with the code. – jbutler483 Apr 29 '16 at 22:53
-2

Try this:

HTML

<section class="footer id="footer">
Content
</section>

CSS

#footer {
background-color: #63C0B8;
color: #1e1e1e;
margin-bottom: 0px;
}

That hashtag is IMPORTANT

Also note that the footer will stay on the bottom ... but you need to put content above it first.

Robert Dewitt
  • 324
  • 5
  • 17
  • You are making a lot of presumptions here, especially as it is more than likely OP is using a `footer` element, and hence is valid a CSS selector. – jbutler483 Apr 29 '16 at 22:35
  • The element being used is a footer, it's not an id. – Drew Kennedy Apr 29 '16 at 22:36
  • Above answer is edited to add HTML code. Use the footer as an element instead of the footer being an actual
    tag. It works for me.
     – Robert Dewitt Apr 29 '16 at 22:38
  • 1
    Why would you use a `section` tag if a `footer` tag is already available? (small point though, you need to close your class definition in your HTML to make it valid) – jbutler483 Apr 29 '16 at 22:40
  • Because that's the only method that worked for me, since all of my CSS is inline in my AMP HTML pages. – Robert Dewitt Apr 29 '16 at 22:43
  • @RobertDewitt inline CSS is a very bad practise to get into, you should always aim to have that placed externally. It is my understanding caching can then take place to increase performance. – jbutler483 Apr 29 '16 at 22:44
  • Per AMP standards, I think that's how it was outlined to be used. But I don't have issues with it, although I understand the practice is rather bad. – Robert Dewitt Apr 29 '16 at 22:46
  • 1
    [That. Sounds. Horrible. And here's why](http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css) – jbutler483 Apr 29 '16 at 22:51