How to pin footer?

Question

css

May the gurus of this public forgive me, but my strength is no more. I've been sitting for an hour now, and I can't press the damned footer. It is necessary that, depending on the amount of data on the page (main), it be pressed, little at the bottom of the window, a lot of scrolling appears, and the footer at the bottom.
Here is my pain.
jsfiddle.net/ocuddx7d
I'll say right off the bat, YES I used google search and toaster, but everything I found there didn't help. Of course, I do not deny the factor of my inexperience (curvature, who cares).
PS Thanks in advance.

Answer 1

Get to know flexbox. For cross-browser autoprefixer. After that, the world will be different.

Answer 2

I have a similar footer behavior implemented on my site , you can see the implementation there. In short, when an element is added to the page (I add products to the list), a function is called that checks if the footer is in the visible area, and depending on this, adds or removes a class to the footer that is responsible for the position of the footer (pressed / unpressed).
Here is the function itself:

function togglefooter() {
  var $marker = $('#list');
  var $win = $(window);
    if ($win.scrollTop() + $win.height() - 55 < 55*$('#list').children().length + $marker.offset().top) {
      $('#control').addClass('navbar-default navbar-fixed-bottom');
      }
      else {$('#control').removeClass('navbar-default navbar-fixed-bottom');}
}

I do not pretend to be a standard, but it works, it suits me =)

Answer 3

I use this

Answer 4

ryanfait.com/sticky-footer
No bootstrap, no flexbox and 100%
browser support. Replaced the top and bottom
divs with header/footer long time ago and footer

if(($(header).height()+$(main).height()+$(footer).height())<$(window).height()){
      $(main).css({"min-height":($(window).height()-$(header).height()-$(footer).height())+"px"})
}

We hang it on window.load (or document.ready)+resize+orientationchange
If the blocks have internal indents, we take another height, for example, offsetHeight