Menu icon Foundation
sticky footer for phones

so i've been trying to get a sticky footer for phone view and while i can get one to appear if i set the height it either doesn't appear for small phones or is in the middle of the page for larger phones. is there a responsive sticky footer that will work for any phone and be on the bottom every time? trying to set it to margin-top: 100% doesn't work for all phones and i've tried other ideas like:

<div id="footer"> Your footer here </div>

<script>
 $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});
</script>

but nothing seems to be working. here's the example website i'm building on:

http://www.embroiderywear.com/

 

stickyfooterphone viewResponsive

so i've been trying to get a sticky footer for phone view and while i can get one to appear if i set the height it either doesn't appear for small phones or is in the middle of the page for larger phones. is there a responsive sticky footer that will work for any phone and be on the bottom every time? trying to set it to margin-top: 100% doesn't work for all phones and i've tried other ideas like:

<div id="footer"> Your footer here </div>

<script>
 $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});
</script>

but nothing seems to be working. here's the example website i'm building on:

http://www.embroiderywear.com/