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 />
                    </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;
                height:100%;
                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

// Body Height
bodyH = document.body.offsetHeight;
// Window Height
windowH = window.innerHeight;
// Footer element
footer = document.getElementById("footer");
// Check if body height is higher than window height :)
if (bodyH < windowH) {
    // add to the Class attribute of the footer element
    footer.className += " noOverflowFooter";
}