HTML and CSS Fixes for Sticky Footer and Scroll Issues in Vue.js

Damien Kelly:
I’m having an issue where i have a html element that is repeating v-for , and if the content extends past the current window height scrolling is disabled, would also like to have an element to stick to the footer

image


Jason Perry:
@Hassan Mukhtar @Linxue Ren


Linxue Ren:
Hi, you can add h-full overflow-auto to this container. To stick the footer, add fixed bottom-0


Damien Kelly:
Thanks @Linxue Ren, the fix bottom worked but now there is a UI issue, and the h-full overflow-auto did not

image


Linxue Ren:
Hi, check with the parent container to see if any overlapping height. Can use the ai assistant to help you check that, or use inspect tool in browser.