Footer not at the bottom of the whole pages

Question

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

You need to use the column system in Bootstrap and stop using absolute positioning. — rpm192, Nov 07 '18 at 13:38
`position: absolute` works relative to a parent div, try `position: fixed` to make it relative to the viewport — arieljuod, Nov 07 '18 at 13:40
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: https://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083 — Pete, Nov 07 '18 at 13:41
Or use bootstraps sticky footer template: https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/ — Pete, Nov 07 '18 at 13:59
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 — Elvis, Nov 07 '18 at 14:05
a sticky footer means the footer is at the bottom of the page (ie stuck to the bottom). If you check some of the options I have given you, the footer is stuck to the bottom and can move down if the content is too much to push the footer off the bottom - the way you do it, it will always be at the bottom and content will disappear underneath it — Pete, Nov 07 '18 at 14:10
[This explains what a sticky footer is](https://stackoverflow.com/questions/4520505/what-is-a-sticky-footer) - and it sounds exactly like what you are describing — Pete, Nov 07 '18 at 14:18
@Pete I take a reference at the footer template you show me and fixed my problem! Thanks a lot man! How could I give you a thumbs up? new in stackoverflow — Elvis, Nov 07 '18 at 14:29
Hahaha, no probs - no need to upvote comments, glad you sorted it — Pete, Nov 07 '18 at 14:31

score 0 · Answer 1 · answered Nov 07 '18 at 13:39

0

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

answered Nov 07 '18 at 13:39

paytoncodes

92
8

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? – Elvis Nov 07 '18 at 13:59
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 – Elvis Nov 07 '18 at 14:11

Floww · Answer 2 · 2018-11-07T13:47:02.210

0

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.

edited Nov 07 '18 at 13:47

answered Nov 07 '18 at 13:40

Floww

64
11

score 0 · Answer 3 · answered Nov 07 '18 at 13:45

0

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!

answered Nov 07 '18 at 13:45

Sarah Elizabeth Waldie

16
2

Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this? – Elvis Nov 07 '18 at 14:01

score 0 · Answer 4 · answered Nov 07 '18 at 14:28

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

score 0 · Answer 5 · answered Nov 07 '18 at 21:04

0

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

answered Nov 07 '18 at 21:04

codeWithMe

852
12
17

this also overflows the content when page is long – luky Oct 28 '20 at 15:52

Footer not at the bottom of the whole pages

5 Answers5