How to keep autoresize textarea text away from the very bottom of screen?

I'm trying to create a 100px gap between a textarea that autoresizes using this js library autosize and the very bottom of the screen.

The demo from the link showcases this problem. Once you hit the bottom of the screen there is no space between the text and the window.

Cant seem to find any solutions and margins and paddings dont seem to fix this. Any help appreciated thanks.

Solution

An important note is that, in order to work, the script below needs flow-content after the <textarea> element worth of 100px in height. If it doesn't have it, it can't scroll there, so it doesn't work. I provided this scroll-space by setting a padding-bottom:100px on <body> but if you have enough content after your <textarea> to provide the 100px of scroll space, that padding is not necessary. Actually, all of the CSS is there mostly to demonstrate the principle, you shouldn't add it to your project.

The solution is provided by the javascript part.

Another note would be that this is not a fully-working-fit-all-copy-paste-ultimate-solution, but rather a delicate-proof-of-concept. It's up to you to understand what it does and alter it so it works for your specific case. If you have any trouble applying it, just ask/provide details.

And, as a final note, I only added jQuery to it after trying to get scrollTo animated in vanilla without much success. In the end I didn't want to lose more time so just used jQuery.animate(). If you don't need to smooth-scroll to position or if you know how to do it in vanilla, jQuery should be removed altogether (as autosizer is stand-alone too). So, if you need/want it, I could provide a jQuery free non-animated solution.

Here it is:

autosize(document.querySelectorAll('textarea'));

$('textarea').each(function(){
  autosize(this);
}).on('autosize:resized', function(){
  let fromBottom = $(window).height() - this.clientHeight;
  if (fromBottom < 102) {
    $('html, body').stop().animate({
      scrollTop:(102 - fromBottom) + 'px'
    }, 210);
  }
});

textarea {
  width: 80%;
  margin-left: 10%;
}
body {
  padding-bottom: 100px;
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  
}
body::before {
  left: 0;
  width: 100%;
  position: fixed;
  bottom: 100px;
  content: '';
  display: block;
  border-bottom: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>


<textarea>test textarea</textarea>