JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id='container'>
            <div id='header'>
                This is the header.
            </div>
            <div id='container2'>
                <div id='container1'>
                    <div id='col1'>
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                        Menu<br />
                    </div>
                    <div id='col2'>
                        Content!<br />
                        Content!
                    </div>
                </div>
            </div>
            <div id='footer'>
                This is the footer.
            </div>
        </div>
    </body>

CSS

html, body{
                margin:0px;
            }
            #container{
                height:100%;
                width:1024px;
                margin:auto;
            }
            #header{
                width:100%;
                height:100px;
                background:purple;
            }
            #container2{
                float:left;
                width:1024px;
                background:yellow;
                overflow:hidden;
                position:relative;
            }
            #container1{
                float:left;
                width:1024px;
                background:red;
                position:relative;
                right:874px;
            }
            #col1{
                float:left;
                width:150px;
                position:relative;
                left:874px;
                overflow:hidden;
            }
            #col2{
                float:left;
                width:874px;
                position:relative;
                left:874px;
                overflow:hidden;
            }
            #footer{
                width:1024px;
                background:purple;
                float:clear;
            }
.noOverflowFooter            
{
    position:absolute;
    bottom:0px;
}

JavaScript

$(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() < $(window).height()) {
        $("#footer").addClass('noOverflowFooter');
    }
});