Footer at bottom of page (not sticky) even when there's little content

Question

I'm new to SO, but I've been learning to code for the past couple years. I just launched my webpage and everything looks good except for the About/Contact page. There isn't enough content for the footer to stick to the bottom and the Sticky Footer code makes it always present. I only want it to be at the bottom of the page and underneath content. It looks fine on small browsers but not on larger screens or when you zoom out.

Positioning absolute and fixed doesn't work, and bottom: 0 doesn't work either. I'm running out of ideas on how to stick it to the bottom.

Any ideas???

Here's my site: http://yasminpanjwani.com/aboutcontact.html

Thanks!

Possible duplicate of [Make footer stick to bottom of page correctly](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) — APAD1, May 31 '16 at 22:15
Have you tried combining those statements... LOL! Works for me. This question is a duplicate as noted by APAD1. — Mr. Hugo, May 31 '16 at 22:23

score 0 · Answer 1 · answered Jun 01 '16 at 00:41

You could calculate the height of the viewport and set a min-height to your main element

If your using jQuery

$(document).ready(function() {

  var viewportHeight = $(document).height();

  $('main').css('min-height', viewportHeight - 200 ); // minus size of your header & footer

});

If not;

var $main = document.getElementsByTagName('main'),
    body  = document.body,
    html  = document.documentElement;

var height = Math.max(
              body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight
            );


$main.style.minHeight = height + 'px';

Footer at bottom of page (not sticky) even when there's little content

1 Answers1