I have a textarea (Google Chrome) with so much text that it does not fit. Because of that a scrollbar is now visible.
When I write at the bottom of the textarea, the textarea does not take into account that I have a big padding bottom. It will only step down to my current position. It will not use the padding bottom to push down.
Is there a good way around it? I tried to cheat by adding padding bottom to a white container (not in this example). That worked, almost. It took the padding into account, but the scrollbar then did not go all the way down because the textarea did not go all the way down.
.wrap {
background: #eee;
padding: 1rem;
}
textarea {
height: 300px;
width: 300px;
padding: 4rem;
resize: none;
margin: 0 auto;
display: block;
border: none;
}<div class="wrap">
<textarea spellcheck="false">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a metus mollis, maximus leo a, ultricies mi. Fusce rutrum, felis id vulputate molestie, eros neque commodo purus, blandit ultrices leo urna vel massa. Sed nec pellentesque dolor. Donec a eleifend arcu. Donec sagittis diam vitae vehicula malesuada. Pellentesque laoreet, metus nec pretium interdum, dolor leo lacinia diam, id cursus lorem quam in ipsum. Sed eu sem a ante tristique interdum. Maecenas id urna at massa egestas porttitor. Pellentesque turpis enim, dictum tristique molestie in, pulvinar non est. Integer eu tristique ligula, vitae laoreet quam. Phasellus nec dolor purus. Suspendisse eget nisi lorem. Cras rhoncus ex at mattis tincidunt.
Morbi pulvinar nunc sit amet viverra sollicitudin. Nullam scelerisque erat vitae lectus vestibulum molestie. Pellentesque varius, nisi eget viverra malesuada, magna enim semper arcu, a varius quam sapien quis lacus. Ut et diam erat. Duis molestie elementum justo, et lacinia orci blandit condimentum. Fusce non libero non nunc blandit lacinia. Vivamus quis ornare orci, eu hendrerit enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus luctus ut quam id tempus.
Mauris euismod, augue non eleifend gravida, nulla justo pretium lectus, sit amet consequat sapien nunc id nulla. Quisque vitae nunc consequat, aliquam justo gravida, tempor diam. Nullam eu lobortis arcu. Ut aliquet congue erat non semper. Nullam eget magna ullamcorper, rutrum dolor eu, facilisis orci. Etiam rhoncus at elit eget pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer elit purus, feugiat sit amet purus et, finibus congue lacus. Aenean viverra id nibh a dignissim. Nullam dignissim lectus at justo placerat vulputate id at orci. Aenean ante mi, vehicula ut elementum sed, dictum eget libero. Cras commodo sollicitudin odio non pulvinar. Proin non lorem sed diam aliquet mattis non ut ante. Proin volutpat ante quis ullamcorper pellentesque. Etiam lobortis, justo quis dignissim posuere, mauris ex auctor sem, nec auctor tortor ligula eget nunc. Ut imperdiet aliquam risus sed bibendum. Praesent fermentum mauris vitae nibh eleifend posuere. Nulla in euismod nisi, vel dignissim diam.
Suspendisse mi velit, rutrum eu rhoncus ac, faucibus sed erat. Duis ligula augue, lobortis eu ex vel, mattis lobortis sapien. Nullam lacinia cursus sodales. Etiam luctus euismod lectus, vitae bibendum lorem porttitor et. Sed a elementum velit. Etiam tempus malesuada odio, sed luctus quam facilisis ut. Aenean dignissim pretium leo, nec varius metus eleifend sit amet. Sed placerat elit neque, sit amet posuere tellus posuere varius. Aliquam aliquam luctus venenatis. Nam ac pellentesque tortor.</textarea>
</div>I hope the image below illustrate what I mean. I'm att the last character of the textarea. Still it does not follow down to the bottom of the textarea.
