"Sticky Footer Using CSS"
Bootstrap 3.3.0 Snippet by JaiDoubleU

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Wrap all page content here --> <div id="wrap"> <!-- Begin page content --> <div class="container"> <header class="page-header"> <h3>Sticky Footer Example</h3> </header> <section> <p class="lead">Page Body </p> <p class="lead">Page Body </p> </section> </div> </div> <footer id="footer"> <p class="h5 text-muted">Sticky Footer</p> </footer>
/* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by its height */ margin: 0 auto -30px; /* Pad the bottom by footer height */ padding: 0 0 30px; } /* Set the fixed height of the footer here */ footer { height: 30px; background-color: lightblue; } /* Custom page CSS -------------------------------------------------- */ footer > p { padding: 0 125px; }

Related: See More


Questions / Comments: