<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 ----------> <header>HEADER</header> <article> <br> <input type='checkbox' id='c' /> <label for='c'>Toggle Content Height</label> </article> <footer>FOOTER</footer>

html{ height:100%; } body{ min-height:100%; padding:0; margin:0; position:relative; } body::after{ content:''; display:block; height:100px; } footer{ position:absolute; bottom:0; width:100%; height:100px; } /* FOR DEMO ONLY */ body{ font:bold 1.2em/2.5 arial; text-align:center; } label{ cursor:pointer; display:inline-block; transition:1s ease; } :checked ~ label{ margin-bottom:1400px; } article{ width:40%; margin:0 auto; color:#444; } header{ background:#D51B52; height:50px; color: #fff; } footer{ background:#000; color:#fff; }