Make footer stick to bottom of page correctly [duplicate]

by

The simplest solution is to use min-height on the <html> tag and position the <footer> with position:absolute;

Demo: jsfiddle and SO snippet:

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}

footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
}
<article>
    <!-- or <div class="container">, etc. -->
    <h1>James Dean CSS Sticky Footer</h1>
    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
<footer>
    <h1>Footer Content</h1>
</footer>

More Related Contents:

  1. Using tags in the with other HTML
  2. How to fallback to local stylesheet (not script) if CDN fails
  3. Embed image in a element
  4. Using CSS :before and :after pseudo-elements with inline CSS?
  5. Make a div fill up the remaining width
  6. How to make fill height
  7. Highlight label if checkbox is checked
  8. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  9. White space at top of page
  10. How to apply two CSS classes to a single element
  11. Why does percentage padding break my flex item?
  12. How does the vertical-align property work?
  13. Why are dashes preferred for CSS selectors / HTML attributes?
  14. Style not working for innerHTML in Angular [duplicate]
  15. Table tbody scroll in IE8
  16. How to Set Height for the Drop Down of Select box
  17. How can I prevent the scrollbar overlaying content in IE10?
  18. How to center-align one flex item and right-align another using Flexbox [duplicate]
  19. CSS3 border-radius clipping issues
  20. When I try to shift the image upwards using negative margin the whole container is moved upwards
  21. CSS transform origin issue on svg sub-element
  22. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  23. What’s the difference between HTML’s and CSS’s width attribute?
  24. How do I make flex box work in safari?
  25. Zebra striping a flexbox table with wrapping items
  26. CSS Layout 2-Column fixed-fluid [closed]
  27. Create a Reverse Clip-Path – CSS or SVG
  28. Font Awesome & Unicode
  29. CSS crop string in the middle
  30. Change image on hover

Leave a Comment