JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<!DOCTYPE html>
<html>
<body>



<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div class="container">
<div id="menu" style="background-color:#FFD700;height:100%;width:auto;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:100%;width:auto;overflow:auto">
test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content </div>
 </div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © something</div>

</body>
</html>

CSS

*
{
    margin:0;padding:0;
}
html, body
{
    height: 100%;
}
#content
{
    min-height: 100%;
    
}

.container
{
    height: 100%;
    background: pink;
    margin: -37px 0 -20px 0;
    padding: 37px 0 20px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    overflow:auto;
    height:100%;
}
#header
{
    position: relative;
    z-index:1;
    height: 37px;
}
#footer
{
    height: 20px;
    position: relative;
    z-index:1;
}