JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<div id="page-container">
    <div id="banner">Header</div>
    <div id="left-nav">Sidebar</div>
    <div id="cc_main_content">
        <div class="distui-member"><a href="#" resize>add 28 px</a></div>
        <div class="footer">Footer</div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
#page-container {
    position: absolute;
    height: 100%;
    width: 100%;
}
#banner {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    z-index: 999;
    background: #f00;
}
#left-nav {
    float: left;
    background: #0f0;
    position: fixed;
    top: 50px;
    left: 0;
    height: 100%;
    width: 75px;
}
#cc_main_content {
    background: #00f;
    position: absolute;
    top: 51px;
    left: 75px;
    right: 0;
    height: 100%;
    box-sizing: border-box;
}
.footer {
    background: #f0f;
    position: fixed;
    bottom: 0;
    width: 100%
}
.footer.footer-inline {
    position: static;
}
.distui-member {
    position: relative;
    height: auto;
    background: #ff0;
}

JavaScript

var paddingOn = 0;

// method to simulate changing the content height of distui-member
$("[resize]").on("click", function () {

    // add about 28 px
    $('<div>').css('height', '28px').html("add 28px").appendTo($(".distui-member"));

    // add padding or not
    if (paddingOn) {
        paddingOn = 0;
    } else {
        paddingOn = 8;
    }
    $('#cc_main_content').css('padding', paddingOn).css('margin', paddingOn);

    // adjust to the new height
    $(".distui-member").trigger("resize.distui");

});
// private utility methods
function as_int(val) {
    return parseInt(val, 10) || 0;
}
function sum_height (selectors) {
    var sum = 0, includePadding = true;
    for (i = 0; i < selectors.length; i++) {
        sum = sum + as_int($(selectors[i]).outerHeight(includePadding));
    }
    return sum;
}
function get_padding(selector, side) {
    var $selector = $(selector);
    return as_int($selector.css('margin-' + side)) + as_int($selector.css('padding-' + side));
}
// method handler to update footer position based on main content div
function updateFooterPostion () {

    var height, padding, $footer, windowHeight;

    $footer = $(".footer");

    // determine the current height of the panel accounting for the banner and footer
    height = sum_height(["#banner", ".footer", ".distui-member"]);

    // determine the current left padding to adjust the footer left position
    padding = get_padding('#cc_main_content', 'left');

    // determine the window view port height to adjust inlining the footer
    windowHeight = $(window).height();

    if (height >= windowHeight) {
        $footer.addClass("footer-inline");
    } else {
        $footer.removeClass("footer-inline");
    }
    $footer.css('margin-left', -padding + 'px').css('width', $('#cc_main_content').outerWidth(true));

}
// bind to any event listeners that need to adjust the footer position
$("body").on("resize.distui", ".distui-member", updateFooterPostion);
// init the footer position when page...