Footer not at the bottom of the whole pages

footer at bottom of page but not fixed
push footer to bottom
make footer stick to bottom
keep footer at bottom of page when scrolling
how to keep footer at bottom of page bootstrap
force footer to bottom
bootstrap 4 footer always at bottom
bootstrap footer bottom

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>

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

css footer not displaying at the bottom of the page, Why is my footer not at the bottom of the page? “When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web

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!

How to create footer to stay at the bottom of a Web page , How do I fix the footer at the bottom of the page? 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.

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.

Why Is My Footer at the Middle of My Webpage?, Why is my footer at the top of my page? To create a footer to stay at the bottom of a web page We can fix the position of it at the bottom of the webpage so that, if you scroll down that webpage you can still view the footer from any position at the page. To make a footer fixed at the bottom of the webpage, you could use position: fixed.

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;
}

How to keep your footer where it belongs ?, Basically, the problem is happening because the footer element is 'pushed' under the element that is above it and the height of that element isn't as long as the height of the page. The bottoms of my pages don’t print. Frequently people have problems with material at the bottom of a page (the page number, for example, or the footer) not printing correctly. Often, the characters get cut in half so that only the top half of the line prints. The most common complaint is that the bottom of a page border doesn’t print.

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*/
}

How to Always Keep the Footer at the Bottom of A Page, The footer, rather than staying at the bottom of the page where we 'stuck' to the bottom of the viewport, whether we want it to or not. all other page content --> </​div> <footer id="footer"></footer> </div> </body> </html>. When working with dynamic content that includes a footer, a problem sometimes occurs where the content on a page is not enough to fill it. The footer, rather than staying at the bottom of the page where we would want it to stay, rises up and leaves a blank space beneath it.

Sticky Footer, Five Ways, all the other behaviours are correct. my solution which worked was putting simply overflow to Duration: 10:01 Posted: Apr 6, 2017 There also may be some really short pages (like the 404), which might not be long enough to fill the whole browser. Keeping the footer at the browser's bottom just got a little bit easier with CSS-Grid.

Footer NOT sticking to Bottom of page - HTML & CSS, The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does Remember we have a complete guide for all this flexbox stuff.

Keep that damn footer at the bottom - ZERO, They are requesting a footer on the bottom of the page. The only thing I can think of is that all those content boxes with position:absolute; could be screwing up 

Comments
  • You need to use the column system in Bootstrap and stop using absolute positioning.
  • position: absolute works relative to a parent div, try position: fixed to make it relative to the viewport
  • I would stop using absolute positioning until you know how to use it properly, instead use flex for this as it will be simpler and easier to understand - I have several different approaches to a sticky footer as outlined in my answer here: stackoverflow.com/questions/23651942/…
  • Or use bootstraps sticky footer template: getbootstrap.com/docs/4.1/examples/sticky-footer-navbar
  • hi @Pete , I am not looking for a sticky footer, I want it to be just at the bottom of the page, not the type that go with you when scrolling, on a side note, i tried position:fixed, it is block my content when I had scrolled down
  • I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
  • I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
  • Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?