How to get a footer to stay in the background without exceeding other elements?

For the position of the elements depending on the space on the screen or viewport you must use something new from CSS3 which is the units of measure in vh . I leave a link for you to read and you can see Link 1 Link 2

I imagine you have something like this:

<header>
    <!-- TU HEADER -->
</header>
<main style="height: 100vh;">
    <!-- TU FORMULARIO -->
</main>
<footer>
    <!-- TU FOOTER -->
<footer>

Here is where you should play with the height value since as you have a header a main and a footer should not be 100 ai no less. Guide through Internet examples of how to use this new measure of css3

you have to put a pocision fixed, bottom 0 and a clear both

example:

  #footer{
    position:fixed;
    bottom:0;
    clear:both;
    width:100%;
    height:100px;

}

Do not put absolute position on it since it will intervene with your other content on the web and another thing use the html5 tags for the footer <footer></footer>

greetings ... the option to use css in this way will serve you this time (REF # 1):

  #footer{
position:fixed;
bottom:0;
clear:both;
width:100%;
height:100px;}

If within a page with content you do this, the footer will be placed on some elements, it will also happen on mobile devices, since position: fixed, keeps the footer fixed and with the rest you keep it down ... I what I do to avoid this is to detect the size of the scroll: reference to the size of the javascript scroll using (REF # 2):

window.pageYOffset;

So I can ask if the scroll is active (REF # 2) it is not necessary to use the CSS above (REF # 1), and if the scroll is not active, I use that css, avoiding causing problems in mobile devices and in other screens .... ALSO LIKE ANOTHER OPTION CREATES A DIV THAT LETS YOUR FORM, AND ADJUST IT TO THE SIZE OF THE SCREEN WITH'window.innerHeight; 'AND YOU REMAIN THE SIZE OF THE FOOTER

In TailWindCSS use the pin class

<div class="relative h-24 w-24 bg-grey-light">
  <div class="pin-x pin-b h-8 bg-grey-darker"></div>
</div>