Attached SupraFooter

SupraFooter that attaches to stickyfooter

by IngoVals

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="wrap">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="navbar-brand" href="#">SupraFooter</a>

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="First"><a href="#">Home</a>
                    </li>
                    <li class="Active"><a href="#">Something</a>
                    </li>
                    <li class="last"><a href="#">Soemthing else</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="header">
        <div class="container">
             <h1>Suprafooter</h1>

        </div>
    </div>
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend vitae neque sit amet ultricies. Nulla facilisi. Donec non tellus dui. Sed dignissim, elit ac tincidunt dignissim, enim urna sollicitudin risus, eu bibendum elit purus at mi. Proin vitae mauris risus. Vivamus imperdiet iaculis nulla quis aliquam. Morbi sit amet diam eu eros vehicula facilisis. Etiam augue ipsum, varius sit amet tincidunt ac, tempus sed nunc.</p>
                    <p>Phasellus tempor ipsum ac nisi pellentesque, eget mattis tellus imperdiet. Sed eget odio sodales enim viverra convallis eu a arcu. Aliquam vel diam vitae...

CSS

html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/*Wrap to push footer down to bottom*/
 #wrap {
     flex: 1;
}
#footer {
    background-color: #440000;
    height: 60px;
    color: #ffffff;
}
.suprafooter {
    min-height: 100px;
    background-color: #880000;
    color: #ffffff;
}





/********************************************************************************
You can safely ignore all below here, just some theme for better representation.
*********************************************************************************/
 .navbar-inverse {
    background-color: #440000;
    margin-bottom: 0;
}
.header {
    background-color: #880000;
    min-height: 100px;
    color: #ffffff;
    margin-bottom: 20px;
}