"append demo"
Bootstrap 4.1.1 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="page-wrap"> <h1>Sticky Footer</h1> <h2>with Fixed Footer Height</h2> <button id="add">Add Content</button> </div> <input type="text"> <footer class="site-footer"> I'm the Sticky Footer. </footer>
/* Mostly: http://ryanfait.com/sticky-footer/ */ * { margin: 0; } html, body { height: 100%; } .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } .site-footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px; } .site-footer { background: orange; } h1 { color:silver; text-shadow: 4px 4px 1px #300000, 4px 6px 1px #400000, 4px 8px 1px #500000, 4px 10px 1px #600000, 4px 12px 1px #700000, 4px 14px 1px #800000, 4px 16px 1px #900000, 4px 18px 1px #A00000, 4px 20px 1px #B00000, 4px 22px 1px #C00000, 4px 24px 1px #D00000, 4px 26px 1px #E00000, 4px 28px 1px #F00000, 4px 30px 1px #FA0000, 4px 32px 1px #FB0000, 4px 34px 1px #FC0000, 4px 36px 1px #FD0000, 4px 38px 1px #FE0000, 4px 40px 2px #FF0000; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
$(document).ready(function(){ $("#add").on("click", function() { $("<p>Pellentesquend leo.</p>").appendTo(".page-wrap"); }); });

Related: See More


Questions / Comments: