title: How to make a scrollable div expand to full height on scroll and click
body: <p>I'm looking to update the below section if possible.</p>
  
  <p>I need to have a div 250px high but lets you scroll through all of the content. Once you have scrolled to the bottom of the 250px window, it automatically expands to show the full content.</p>
  
  <p>Also there would be a button below which if clicked expanded the section if you don't scroll down.</p>
  
  <p>Does anyone know if this is possible?</p>
  
  <p>I can only get it to expand when you click on the window at present.</p>
  
  <p><a href="https://codepen.io/sharpy24ws/pen/QWWrOoz" rel="nofollow noreferrer">https://codepen.io/sharpy24ws/pen/QWWrOoz</a></p>
  
  <pre><code>div {
  width: 100%;
  height: 250px;
  background: #ccc;
  overflow-y: auto;
  }
  
  #container{
  margin:0px auto;
  border:1px solid red;
  }
  
  #container div{
  position:relative;
  float:left;
  margin-right:5px;
  }
  #container div span{
  position:absolute;
  bottom:0;
  right:0;
  }
  
  $(window).load(function(){
  $("div").css("overflow", "hidden");
  $('div').click(function() {
  $(this).animate({
  height: '100vh'
  })
  })
  });
  </code></pre>