<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 ----------> <div class="container-fluid"> <div class="row parent"> <div class="col-xs-12 col-sm-12 col-md-4 text-center" id="left"> <p>Left contents START</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents END</p> </div> <div class="col-xs-12 col-sm-12 col-md-8" id="right"> <div class="full-bg">  <div id="footer"> © 2017 Elsa </div> </div> </div> </div> </div> <!-- add nicescroll to hide scrollbar -->

body, html { margin: 0; height:100%; } body{ overflow: hidden; } #left { background-color: #FC6E51; } .container-fluid, .parent{ height: 100%; } #right { margin: 0; padding:0; } #left{ position: relative; float: left; text-align: center; height:100%; overflow-y: auto; } #right{ position: relative; float: left; text-align: center; height:100%; overflow-y: hidden padding:0; margin:0; } #footer { width:100%; height:50px; margin: 0; padding:0; color:#fff; } .full-bg { background-image: url('https://source.unsplash.com/random'); background-position: center center; background-size: cover; }

$(document).ready(function() { var docHeight = $(window).height(); var footerHeight = $('#footer').height(); var footerTop = $('#footer').position().top + footerHeight; if (footerTop < docHeight) { $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px'); } });