title: Setting scrollTop only works when element has fixed height
body: <p>I am creating a chatbox using AgularJS, and I need my scrollable div containing the message thread to scroll to the bottom by default. The div has these properties below</p>
  
  <pre><code>&lt;div id="test" style="margin-top: 50px; margin-bottom: 50px; overflow-y: scroll; height: 100%;"&gt;
  </code></pre>
  
  <p>I am using this directive to set the scrollTop to the scrollHeight when the last element in the list is loaded</p>
  
  <pre><code>angular.module('myApp.directives', [])
  .directive('lastElement', function(){
    return {
      priority: 1,
      restrict: 'A',
      link: function(scope, $el, attrs, ctrls){
        var parent = $el[0].parentNode.parentNode;
  
        if(scope.$last){
          parent.scrollTop = parent.scrollHeight;
        }
      }
    }
  });
  </code></pre>
  
  <p>Unfortunately, this does not work. The scrollTop value remains 0. However, when I instead give the div a fixed height instead of a percentage it scrolls to the desired spot. </p>
  
  <pre><code>&lt;div id="test" style="margin-top: 50px; margin-bottom: 50px; overflow-y: scroll; height: 100px;"&gt;
  </code></pre>
  
  <p>How can I set scrollTop while setting the height of my div to a percentage.</p>