Stuck footer

by Emily Humphrey

HTML

<header class="js-subtract-fill">This is the header</header>
<main class="js-min-fill">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales arcu sit amet urna finibus tincidunt. Ut elementum urna et pharetra tempor. Ut laoreet pulvinar libero condimentum egestas. Praesent iaculis elit a ipsum rhoncus mollis. Cras quis ante nec mi feugiat vestibulum. Pellentesque est neque, egestas vitae neque eleifend, lacinia rhoncus tortor. Nam gravida, elit et gravida dictum, tortor neque lacinia purus, vel ultricies ligula sem ut metus. Donec tristique fringilla lorem in facilisis. Praesent facilisis ligula commodo orci porta iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc eget ante in metus accumsan condimentum id vel arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc massa mi, rutrum tempus viverra vel, porta et tortor. Suspendisse ut velit sit amet metus mattis ultrices vitae eget nunc.
    
</main>
<footer class="js-subtract-fill">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales arcu sit amet urna finibus tincidunt.Nunc massa mi, rutrum tempus viverra vel, porta et tortor. Suspendisse ut velit sit amet metus mattis ultrices vitae eget nunc.</footer>

SCSS

*{
    box-sizing: border-box;
}

body{
    margin: 0;
}

main{
    padding: 20px;
    // no margins on main, please
}
header{
    margin-bottom: 10px;
    background: red;
}
footer{
    padding: 20px;
    margin-top: 30px;
    background: blue;
}

JavaScript

function minFill(){
    var target = $(".js-min-fill");
    var fillHeight = $(window).height();
    $(".js-subtract-fill").each(function(){
        var element = $(this);
        fillHeight = fillHeight - element.outerHeight(includeMargin=true);
    });
    target.css({
        "min-height": fillHeight
    });
}

minFill();

$(window).on("resize", minFill);