How To Keep Footer At Bottom The Easy Way

** use Flex ,its much easier with it.
check https://laracasts.com/series/learn-flexbox-through-examples/episodes/3

- the position absolute trick always failed to do what is expected so the solution was to use a very simple js code to calculate the heights of elements on the fly, for more info also check http://stackoverflow.com/questions/10268892/outerheighttrue-gives-wrong-value/37493255#37493255 & css-only solutions https://css-tricks.com/couple-takes-sticky-footer

1- html

<nav id="menu" class="navbar">
  ...
</nav>

<div class="main">
  ...
</div>

<footer class="footer">
  ...
</footer>

2- js

function footer() {
  $m = $('#menu').outerHeight(true);
  $f = $('.footer').outerHeight(true);
  $total = $m + $f;
  $('.main').css('min-height', "calc(100vh - " + $total + "px)");
}

$(document).ready(function() {
  footer();
});
$(window).resize(function() {
  footer();
});
$(window).load(function() {
  footer();
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s