JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<header>
        <h1>Header</h1>
        <p>if The Header height is not fixed, It will span excatly his needed space.</p>
    </header>
    <section class="Middle">
        <div class="LeftMenu">
            <h1>Left Menu</h1>
            <p>If my width is not fixed</p>
            <p>I will take excatly what I need</p>
        </div>
        <div class="Content">
            <h1>Content</h1>
            <p>The Content div should always span the available Container space.</p>
            <p>If the content exceed the Content available space, it will scroll.</p>
            <p><a target="_blank" href="http://jsfiddle.net/avrahamcool/6Mp4g/">Here's a demo of this scenario</a></p>
            <p class="Important">This Layout has been tested on: IE10, FireFox, Chrome, Safari, Opera. using Pure CSS only</p>
        </div>
    </section>
    <footer>
        <p>The footer behave just like the header</p>
    </footer>

CSS

*
{
    margin: 0;
    padding: 0;
}
html, body
{
    height: 100%;
    text-align: center;
}

body
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.Middle
{    
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 0;
    
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    overflow: hidden;
}

.Content
{   
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 0 0;

    overflow: auto;
}

/*For demonstration only*/
p
{    
    font-size: 1.3em;
}

.Important
{
    font-weight: bolder;
    color: white;
}

header
{
    background-color: #bf5b5b;
}
.LeftMenu
{
    background-color:  #bdbe4c;
}

.Content
{
    background-color: #90adc1;
}
footer
{
    background-color: #b5a8b7;
}