JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div class="Container">
        <div class="Header">
            <h1>Header</h1>
            <p>if The Header height is not fixed, It will span excatly his needed space.</p>
            <p>The Padding/Margin between the header and the content and around the layout is optional</p>
        </div>
        <div class="HeightTaker">
            <div class="Wrapper Container Inverse">
                <div>
                    <div class="Footer">
                        <p>The footer behave just like the header</p>
                    </div>
                </div>
                <div class="HeightTaker">
                    <div class="Wrapper Content">
                        <div class="Table">
                            <div class="Column C1">
                                <h1>Column 1</h1>
                                <p>The Content div should always span the available Container space.</p>
                            </div>
                            <div class="Column C2">
                                <h1>Column 2</h1>
                                <p>If the content exceed the Content available space, it will scroll.</p>
                                <p><a target="_blank" href="http://jsfiddle.net/avrahamcool/kPK5F/">Here's a demo of this scenario</a></p>
                            </div>
                            <div class="Column C3">
                                <h1>Column 3</h1>
                                <p class="Important">This Layout has been tested on: IE10, FireFox, Chrome, Safari, Opera. using Pure CSS only</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.Inverse, .Inverse > *
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.Table
{
    display: table;
    height: 100%;
    width: 100%;
}
.Column
{
    display: table-cell;
}

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

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

body > .Container
{
    text-align: center;
}

.Header, .Footer
{
    padding: 5px 0;
}
.Header
{
    background-color: #bf5b5b;
}
.C1
{
    background-color: #90adc1;
}
.C2
{
    background-color: #b6ff00;
}
.C3
{
    background-color: #723131;
}
.Footer
{
    background-color: #b5a8b7;
}