JSFiddle - React, Tailwind, and code Playground

by Lynda333

HTML

<link rel="stylesheet" href="http://cssgrid.net/css/1140.css">
<header class="container">
<div id="menu" class="row">
<div class="twelvecol">
<h1 id="logo">
<a href="/home">LOGO</a>
</h1>
<nav>
            <ul class="fancyNav">
                <li id="home"><a href="#"><i class="icon-home"></i></a></li>
                <li id="capabilities"><a href="#">Button 1</a></li>
                <li id="projects"><a href="#">Button 2</a></li>
            </ul>
        </nav>
        </div>
        </div>
        </header>



<div id="page-content">
    <p>PageContent</p>
</div>

<footer>
    <p>Footer Content</p>

</footer

CSS

header{
    background: red;
}

#page-content{
    background: blue;
}

footer{
    background: white;
}

html, body{
font-size:16px;
font-family:      "camingodos-web", Helvetica, Arial, sans-serif;
line-height:23px;
color:#222;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
margin: 0;
padding: 0;
text-align: justify;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 25%, rgba(209,209,209,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(0,0,0,1)), color-stop(100%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */
}


    h1, h2, h3, h4, h5, h6{ font-weight:normal; font-family:      "camingodos-web", Helvetica, Arial, sans-serif; }
    h1{ font-size:24px; }
    h2{ font-size:22px; line-height:28px; }
    h3{ font-size:18px; }
    h4{ font-size:16px; }
    h5, h6{ font-size:14px; }
    
    a{
        color:#2c7cb9;
        text-decoration:none;
    }
    a:hover{
        color:#2f92df;
        text-decoration:underline;
    }
    
    p{ 
        padding-bottom:10px;
    }

header{
    position: relative;
}

#logo {
    background: url("/images/logo-small.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 65px;
    margin: 6px 0 10px 10px;
    text-indent: -9999px;
    z-index: 9999;
    position: relative;
    top:5px;
    left:-10px;
    width:225px;
    height:65px;
    float:left;
}

#menu {
   ...

JavaScript

$(function() {
     var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
     $("#page-content").css("min-height",height+"px");
});