Textarea with fixed footer not showing next line properly - html

Question

I have a a page with a textarea in between fixed headers and a fixed footer. I use some jquery to ensure the viewport shows the new textarea lines at the bottom as you type. Without the fixed footer (white background), the jquery works as it supposed to and the new lines stay in view as you type at the bottom. But with the fixed footer, I have to manually scroll to see the new content at the bottom. It is hidden behind the footer. I have found that if I hit enter while I type however, it will auto scroll the content to stay in view even with the footer. But if I type continuously, I have to scroll to see the new hidden content. I want to have the fixed footer and auto scroll down in the textarea so the new content is always showing above the fixed footer, no matter how much is typed. How can I accomplish this?
$(document).ready(function() {
$('#close-post-modal').click(function() {
$("#main-container").load("mobile/mobile.view.php");
$("#main-content-mobile").load("mobile/feed.php");
document.location.hash = "feed";
});
$('#post-comment-textarea-mobile').on('input', function() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
});
#post-comment-textarea-mobile {
border: none;
overflow: auto;
outline: none;
resize: none;
width: 100%;
}
#post-modal-header {
position: fixed;
top: 0;
}
#post-modal-sub-header {
position: fixed;
}
#post-modal-footer {
position: fixed;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="width-100p">
<div id="post-modal-header" class="bg-white width-100p height-2r space-evenly-x padding-top-1">
<div id="close-post-modal">X</div>
<div>New Post</div>
<div id="save-post-modal">Save</div>
</div>
<div id="post-modal-sub-header" class="bg-white padding-left-1 width-100p height-2r left padding-top-2">
<div class="padding-right-5px">Image</div>
<div>Username</div>
</div>
<div class="padding-left-2 padding-right-2 padding-bottom-1 padding-top-5">
<textarea id="post-comment-textarea-mobile" placeholder="Your Thoughts?"></textarea>
</div>
<div id="post-modal-footer" class="bg-white width-100p space-evenly-x padding-top-2 padding-bottom-1">
<div>Image</div>
<div>Video</div>
<div>Tag</div>
</div>
</div>

Answer 1

I was able to get it to work by adding 100 to the scroll height for the textarea height AND window.scrollTo on input to the textarea's ScrollHeight.
I'm not sure if the 100 is the needed number, you can play with that with your design, its one that worked for me.
$(document).ready(function() {
$('#close-post-modal').click(function() {
$("#main-container").load("mobile/mobile.view.php");
$("#main-content-mobile").load("mobile/feed.php");
document.location.hash = "feed";
});
$('#post-comment-textarea-mobile').on('input', function() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight + 100) + 'px';
window.scrollTo(0,document.querySelector("#post-comment-textarea-mobile").scrollHeight);
});
});
body{padding:0;}
#post-comment-textarea-mobile {
border: none;
overflow: auto;
outline: none;
resize: none;
width: 100%;
}
#post-modal-header {
position: fixed;
top: 0;
}
#post-modal-sub-header {
position: fixed;
background:#000;
}
#post-modal-footer {
position: fixed;
bottom: 0;
width:100%;
background:#000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="width-100p">
<div id="post-modal-header" class="bg-white width-100p height-2r space-evenly-x padding-top-1">
<div id="close-post-modal">X</div>
<div>New Post</div>
<div id="save-post-modal">Save</div>
</div>
<div id="post-modal-sub-header" class="bg-white padding-left-1 width-100p height-2r left padding-top-2">
<div class="padding-right-5px">Image</div>
<div>Username</div>
</div>
<div class="padding-left-2 padding-right-2 padding-bottom-1 padding-top-5">
<textarea id="post-comment-textarea-mobile" placeholder="Your Thoughts?"></textarea>
</div>
<div id="post-modal-footer" class="bg-white width-100p space-evenly-x padding-top-2 padding-bottom-1">
<div>Image</div>
<div>Video</div>
<div>Tag</div>
</div>
</div>

Answer 2

It's the same problem as with fixed header and html anchors. Properties like fixed, absolute and relative pulls an element out of page flow and places it in another dimension (not a professional term).
Just tell jquery where is the end of view. It believes the view ends at screen end.