How To Keep Footer At Bottom The Easy Way

** use Flex ,its much easier with it.

- 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 & css-only solutions

1- html

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

<div class="main">

<footer class="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() {
$(window).resize(function() {
$(window).load(function() {

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.