jQuery sticky footer

jquery css footer sticky

13,731

Solution 1

Ok. HTML:

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

CSS:

#container {
    min-height: 100%;
    position: relative;
    width: 100%;
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 206px; /* footer height, we will fix that with jquery */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0px;
    height: 206px; /* footer height if any */
}

jQuery:

$(document).ready(function(){
    var footer_height=$("#footer").height();
    $("#wrapper").css({
        'padding-bottom' : footer_height
    });
});

I must warn you, jquery .height() function may not work properly so be careful with paddings and margins (just add margin/padding values to 'footer_height' and you should be fine).

Solution 2

I'll just leave this here

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Sticky footer</title>
    <!-- include jQuery -->
    <script src="jquery-2.1.0.min.js"></script>
    <!-- include our scripts -->
    <script type="text/javascript">
      $(function () {
        // sticky footer
        (function () {
          var
            $window = $(window),
            $body   = $(document.body),
            $footer = $("#footer"),
            condition = false,
            resizing  = false,
            interval  = 500
            ;

          function positionFooter() {
            if (resizing) {
              setTimeout(function(){
                if(resizing == false) {
                  positionFooter();
                }
              }, interval);
              return true;
            }
            var
              footer_position = $footer.css('position'),
              body_height   = $body.height(),
              window_height = $window.height(),
              footer_height = $footer.outerHeight();

            if (footer_position == 'absolute') {
              condition = body_height + footer_height < window_height
            }
            else {
              condition = body_height < window_height
            }

            if (condition) {
              $footer.css('position', 'absolute').css('bottom', 0);
            }
            else {
              $footer.css('position', 'relative');
            }

            resizing = setTimeout(function () {
              resizing = false;
            }, interval);

            return true;
          }

          $window.bind("load", function () {
            positionFooter()
          });

          $window.resize(positionFooter);

        }());
      });
    </script>

    <style>
      body {
        text-align: center;
      }

      #header {
        width: 100%;
        background-color: green;
        color: white;
        height: 100px;
      }

      #footer {
        width: 100%;
        background-color: blue;
        color: white;
      }
    </style>
  </head>

  <body>
    <header id='header'>
      Header content
    </header>
    <div id='content'>
      Content is here!
    </div>
    <footer id='footer'>
      Sticky footer content
    </footer>
  </body>
</html>

Solution 3

JQuery

function getWndowSize()
{
    var windows_height=$(windows).height();
    var current_height=windows_height-100;/*change values of 100 how much u need based on your requirement*/
    $("#wrapper").css({'min-Height' : current_height});
}

Code:

<body onload="getWndowSize()">

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

Just try it.because its working fine in my page.

13,731

Author by

James Charless Dickinson

Hey. :)

Updated on June 13, 2022

Comments

James Charless Dickinson about 2 years

James here! I've been trying for about two hours now to get a sticky footer, but I seem keep messing up the CSS. I'm looking for a script that jQuery can handle. I understand how most of the scripts work (which is surprising, since I'm just learning), but I need the script to work no matter what the height of the footer is, because it doesn't have a dynamic height set in the CSS file of my page. Would anyone be able to supply a working script for a sticky footer? I want the footer itself to always be at the bottom of pages, BUT NOT FIXED POSITION. The content element is #posts, and the footer area is a element with the ID of #bottom. Here is a page example: JTB Permalink Page