Stick The Bar To Footer Of The Container

In this Fiddle, I am trying to keep the bar always to bottom-left even if the user scrolls the container. Currently, if I scroll the container, the bar moves along instead of being

Solution 1:

Try this CSS

.grand-parent{
  position: relative;

}
.parent {
  width: 60%;
  height: 300px;
  overflow: auto;
  background-color: tomato; 
}
.content {
  height: 18000px;
  width: 300px;
  background-color: firebrick;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  width: 50px;
  height: 20px;
  background-color: beige;
}

HTML

<div class="grand-parent">
  <div class="parent">
    <div class="content"></div>
  </div>
  <div class="bar">BAR</div>
</div>

Solution 2:

Edited after giving this answer. I ended up using javascript.

var stickToBottom = function (parent) {
    var bar = parent.querySelector('.bar');
    var top = bar.offsetTop;
    parent.addEventListener('scroll', function (e) {
        var el = e.currentTarget;
        bar.style.bottom = -el.scrollTop + "px";
        bar.style.left = el.scrollLeft + "px";
    });
}
var parent = document.querySelector('.parent');
stickToBottom(parent);

Working Fiddle

Because I had following factors to consider:

• Scrollbar thickness vary in each browser
• Width of the content inside the container varies based on screen resolutions.
• When scrolling the container horizontally, the bar should be still at bottom-left.