CSS sticky footer | Footer without fixed height

Question

I have used the sticky footer http://www.cssstickyfooter.com/ several times. The only problem is that the footer has a fixed height. Is there a pure CSS solution that allows the footer to grow based on the content inside?

A JS solution would not be bad, but CSS would be better.

Thanks in advance for your help.

Answer 1

Updated Answer

The initial answer is over five years old, and it fails that the padding is not updated if the footer increases or decreases. You can bind to the window resize event and call it with every fire, but it will be a bit overwhelming.

Instead, I recommend that you bind to the window.onresize event, but throttle the logic so that we don’t calculate styles, break the DOM, or call layouts dozens of times per second :

 (function () { "use strict"; var body = document.querySelector( "body" ); var footer = document.querySelector( "footer" ); window.addEventListener( // Throttle logic: http://jsfiddle.net/jonathansampson/7b0neb6p/ "resize", throttle( adjustContainerPadding(), 500 ) ); function adjustContainerPadding () { body.style.paddingBottom = window.getComputedStyle( footer ).height; return adjustContainerPadding; } }()); 

When the page loads, we immediately launch the adjustContainerPadding method. This method sets the paddingBottom body according to the calculated footer height. Note that the window.getComputedStyle method requires IE9 or more.

Fiddle: http://jsfiddle.net/jonathansampson/7b0neb6p/

---

Original answer

I would recommend that you (for simplicity) just use the cssstickyfooter code and set the css values ​​via javascript (the following jQuery code).

 $(function(){ var footerHeight = $("#footer").height(); $("#main").css("padding-bottom", footerHeight); $("#footer").css("margin-top", -footerHeight); }); 

code not verified but should work just fine

No matter how much content you have in the footer, this will automatically reset the CSS values ​​for you.

Answer 2

Another way is http://pixelsvsbytes.com/blog/2011/09/sticky-footers-the-flexible-way/

Answer 3

The following method is extremely simple and ensures that your footer will change as the window resizes.

Inspiration from https://getbootstrap.com/examples/sticky-footer/ and http://blog.mojotech.com/responsive-dynamic-height-sticky-footers/

CSS

 html { position: relative; min-height: 100%; } footer { position: absolute; bottom: 0; width: 100%; } 

Js

 function positionFooter() { $("main").css("padding-bottom", $("footer").height()); } // Initally position footer positionFooter(); // Reposition footer on resize $(window).resize(function() { positionFooter(); }); 

Answer 4

DISPLAY TABLE = NO JS and NO fixed height!

It works in modern browsers (IE 8 +). I tested it in several browsers and it all seemed to work well.

I found this solution because I need a sticky footer with no fixed height and no JS. The code is below.

Explanation: Basically, you have a container div with 2 children: a wrapper and a footer. Put everything you need on the page (except the footer) in the wrapper. The container has a value of display: table; The shell is set to display: table-row; If you set html, body and wrapper to height: 100% , the footer will stick to the bottom.

The footer is set to display: table; . This is necessary to get a stock of child items. You can also set the footer to display: table-row; This will not allow you to set margin-top in the footer. In this case, you need to become creative with more nested elements.

Solution: https://jsfiddle.net/0pzy0Ld1/15/

And with lots of content: http://jantimon.nl/playground/footer_table.html

 /* THIS IS THE MAGIC */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { margin: 0; padding: 0; } html, body, #container, #wrapper { height: 100%; } #container, #wrapper, #footer { width: 100%; } #container, #footer { display: table; } #wrapper { display: table-row; } /* THIS IS JUST DECORATIVE STYLING */ html { font-family: sans-serif; } #header, #footer { text-align: center; background: black; color: white; } #header { padding: 1em; } #content { background: orange; padding: 1em; } #footer { margin-top: 1em; /* only possible if footer has display: table !*/ } 

 <div id="container"> <div id="wrapper"> <div id="header"> HEADER </div> <div id="content"> CONTENT <br> <br>some more content <br> <br>even more content </div> </div> <div id="footer"> <p> FOOTER </p> <br> <br> <p> MORE FOOTER </p> </div> </div> 

Answer 5

I really don't know why everyone is not using this technique. It's so easy

NO FIXED HEIGHT, JAVASCRIPT OR TABLES

Deployed when more content, and when not, it sticks to the bottom

 *{ margin: 0; padding: 0; } html, body{ height: 100%; } body{ min-height: 100%; display: flex; flex-direction: column; } .content{ flex: 1; background: #ddd; } 

 <body> <header> Header </header> <div class='content'> This is the page content <br> PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css) </div> <footer> Footer </footer> </body> 

Answer 6

Make sure it works in all browsers, but try:

#footer { position:absolute; top:100%; width:100%; }

Answer 7

check it out, it will be useful for you

  var margin;
 $ (function () {
     var pageHeight = $ ('# pageKeeper'). height ();
     var clientHeight = window.innerHeight ||  document.documentElement.clientHeight;

if (clientHeight > pageHeight) { margin = clientHeight - pageHeight; if (margin <= 120) { $('#footer').css('top', pageHeight + 30) } else { $('#footer').css('top', clientHeight - 90) } } else { margin = pageHeight - clientHeight; $('#footer').css('top', pageHeight + 30) } $('#footer').show() 

})