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>
        </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">
                        <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/eEFBh/">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>
                    </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%;
}
.Inverse, .Inverse > * {
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.LeftMenu {
    height: 100%;
    float: left;
}
.Content {
    overflow: auto;
    height: 100%;
}
/*For demonstration only*/
 p {
    font-size: 1.3em;
}
.Important {
    font-weight: bolder;
    color: white;
}
body > .Container {
    text-align: center;
}
.Header {
    background-color: #bf5b5b;
}
.LeftMenu {
    background-color: #bdbe4c;
}
.Content {
    background-color: #90adc1;
}
.Footer {
    background-color: #b5a8b7;
}