JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container-fluid">
            <header>Header</header>
            <div id="content" class="col-md-12">Content</div>
            <footer class="col-md-12">footer</footer>
</div>

CSS

.container-fluid {
    border: 1px solid #000;
}

header {
    width: 100%;
    background: blue;
    color: #fff;
}

#content {
    width: 100%;
    height: 300px;
    background: green;
    color: #fff;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px; /*height of you footer*/
    background: red;
    color: #fff;
}