JSFiddle - React, Tailwind, and code Playground

by romario333

HTML

<body class="maxheight">
    <div class="header">
        <h1>header</h1>
    </div>
    <div class="content maxheight">
        aaa
    </div>
    <div>
        footer
    </div>
</body>

CSS

* {
  .box-sizing(border-box);
}
*:before,
*:after {
  .box-sizing(border-box);
}

.content {
    background-color: green;
}

.header {
    margin: 0;
}

html {
    height: 100%;
}

h1 {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* apply this class to ".header" to fix the issue with maxheight*/
.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

JavaScript

var LayoutManager = {
        self: this,

        lastDom: null,
        resizeOccurred: false,

        initialize: function() {
            $(window).resize(function() {
                LayoutManager.autoScaleHeight();
                this.resizeOccurred = true;
            });

            setInterval(function() {
                LayoutManager.detectChanges();
            }, 500);

            LayoutManager.applyBaseStyles();
        },

        applyBaseStyles: function() {
        },

        detectChanges: function() {
            if (LayoutManager.lastDom !== $('body').html() || this.resizeOccurred) {
                LayoutManager.reset();

                this.resizeOccurred = false;
                LayoutManager.lastDom = $('body').html();
            }
        },

        calculateTruncation: function() {

            //$('.dotdotdot').dotdotdot();

            // $('.maxlines2').ThreeDots({
            // max_rows: 2,
            // alt_text_e: true,
            // alt_text_t: true
            // });
            //
            // $('.maxlines3').ThreeDots({
            // max_rows: 3,
            // alt_text_e: true,
            // alt_text_t: true
            // });

        },

        reset: function() {
            LayoutManager.autoScaleHeight();
            LayoutManager.calculateTruncation();
            LayoutManager.resizeAccordions();
        },

        resizeAccordions: function() {
            // Handles resizing the jquery UI Accordions to properly deal with height
            if ($.fn.accordion) {
                $(".ui-accordion").accordion("refresh");
            }
        },

        autoScaleHeight: function() {
            $(".maxheight").each(function() {
                var top = 0;

                if ($(this).siblings().length > 0) {
                    $(this).siblings().each(function() {
                        // Added Modal for bootstrap compatibility
                        // Added firefox /firebug compatibility
         ...