Wsrtjtyk

as shown in the image above, my Footer get loads at the 100% width but it is not at the most bottom of the page, I am new to HTML/CSS, so I've been figuring for an hour, but still can't fix it, the form is overextended from the page view so when I scroll down to the bottom, the spacing after the Sign Up button is also very little... how can I fix this?

Here are the sample of my code

.center-page {

  width: 400px;

  height: 400px;

  position: absolute;

  top: -40px;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

}



.footer-pos {

  width: auto;

  height: auto;

  position: absolute;

  top: 860px;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

}

<div>

  <div class=navbar>

    NAVBAR CONTENTS

  </div>

  <div class="center-page">

    ALL MY "label" and ASP "input" and Sign Up "button"

  </div>

</div>

<div>

  <footer class="footer-pos">

    <div> &copy; 2018 Copyright: HRCA </div>

  </footer>

</div>

I am using bootstrap 4.1.3 (bootstrap.min.css) and here are my custom CSS code for the content(center-page) and my footer

Positioning both elements as absolute is where your issue lies. Your body should not have absolute positioning the way you have it set up.

You are positioning your footer absolutely, and giving it a top value, which is going to determine how far down the page it starts. If you just remove that, the bottom value (0) will position it starting from the bottom up.

For the signup button, try adding some padding to the bottom of the parent element (I'd imagine it's the element here) I.e., padding-bottom: 50px.

CSS can be finicky, but you'll get the hang of it!

CSS:

.footer-pos {

  position: absolute;

  bottom: 0;

  width: 100%;

  text-align: center;

}

HTML:

<div class=navbar> 

  NAVBAR CONTENTS 

</div>



<div class="center-page">

  ALL MY "label" and ASP "input" and Sign Up "button"

</div>



<div class="footer-pos">

  &copy; 2018 Copyright: HRCA 

</div>

top was pushing the thing to the middle.

thanks everyone for your help and contribution!

I had solved the problem by referencing to the bootstrap sticky footer template!
https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/

I change my HTML body to as follows

<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">

    NAVBAR

</div>



<div class="container center-page">

    CONTENT

</div>



<footer class="footer">

    <div class="container">

        &copy; 2018 Copyright: HRCA

    </div>

</footer>

And with minimal custom CSS styling too!

.center-page {

    width: 300px;

    padding-top:50px;

    padding-bottom: 50px;

}

You should do:

.footer-pos {

    position: fixed;/*To make it always be at that point.*/

    top: 100%;/*to make it 100% at the bottom*/

    transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/

}