How to make a footer fixed in the page bottom

by

I use sticky footer: http://ryanfait.com/sticky-footer/

/*

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

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}
<div class="wrapper">
  body goes here
  <div class="push"></div>
</div>
<div class="footer">Footer!</div>

Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.

This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.

More Related Contents:

  1. How do you get the footer to stay at the bottom of a Web page?
  2. CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
  3. How to use HTML to print header and footer on every printed page of a document?
  4. Make div stay at bottom of page’s content all the time even when there are scrollbars
  5. Footer at bottom of page or content, whichever is lower
  6. Flushing footer to bottom of the page, twitter bootstrap
  7. Problem with CSS Sticky Footer implementation
  8. force footer on bottom on pages with little content
  9. Dynamic news paper layout using asp.net C# web form
  10. How can I center an absolutely positioned element in a div?
  11. Flex-box: Align last row to grid
  12. Specificity of inherited CSS properties
  13. CSS 3 slide-in from left transition
  14. Change color and appearance of drop down arrow
  15. Inset border-radius with CSS3
  16. CSS media query to target only iOS devices [duplicate]
  17. How to prevent Webkit text rendering change during CSS transition
  18. CSS Transform Skew [duplicate]
  19. Stacking order of elements affected by opacity
  20. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  21. Why is text getting blurry and wobbles during 2d scale transform
  22. Faster way to develop and test print stylesheets (avoid print preview every time)?
  23. How can I send an inner to the bottom of its parent ?
  24. CSS – Sticky footer [duplicate]
  25. What’s the difference between inline styles vs classes?
  26. How to apply border radius in IE8 and below IE8 browsers?
  27. How to apply child:hover but not parent:hover
  28. How to align items in a to the right
  29. css: the meaning of * mark
  30. input type=”image” shows unwanted border in Chrome and broken link in IE7

Leave a Comment