Css - how do I make my footer positioned at the bottom of the page?

Question

0.00/5 (No votes)

See more:

I'm trying to position my footer at the bottom of the page in my cart page, and I made this a sticky footer, but it keeps going up, like higher than the middle. Example:

Page Image

How can I fix this?

Thank you!

What I have tried:

I've tried looking it up and I copied and pasted the code from Chris Coyer's sticky footer. (I did the last one. I've already looked at the other ones, but they had didn't help either.

Posted 22-Nov-20 21:37pm

h311o

Updated 23-Nov-20 19:45pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2020-11-22T23:40:00

Solution 1

You could ask Chris coyer about his code, or look at How To Create a Fixed Footer[^].

Posted 22-Nov-20 23:40pm

Richard MacCutchan

Comments

h311o 23-Nov-20 7:19am

That works, except how do I make the footer just positioned at the bottom, without having it in sight while scrolling?

Richard MacCutchan 23-Nov-20 7:29am

Sorry, I don't know, I have not tried it myself.

h311o 23-Nov-20 8:31am

@Richard-MacCutchanWatch oh, right. Thanks for your help anyway :D

Richard Deeming · Answer 2 · 2020-11-23T19:45:00

Solution 2

The flexbox solution works fine for me:

CSS

html, body {
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
}
#page-footer {
    margin-top: auto;
}

Demo[^]
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks[^]

Posted 23-Nov-20 19:45pm

Richard Deeming

Comments

h311o 24-Nov-20 1:57am

@RichardDeeming it doesn't work though...

Richard Deeming 24-Nov-20 1:58am

It does work though...

If you want help, you're going to need to provide some proper details.

h311o 24-Nov-20 3:02am

Sorry, this is my style.css:

https://ibb.co/ftNDkXy

This is my cart page:

https://ibb.co/wJMFqSY

And my footer.css:

https://ibb.co/pzBqxXh

Richard Deeming 24-Nov-20 3:09am

I can't see the markup of your page, only the output.

I notice you have the footer set to grow (flex: 1 0 auto;) which means it will take up any available space within the flex container. Try removing that line.

h311o 24-Nov-20 3:19am

Thanks for replying!

I commented that line out but it didn't make any difference.

Richard Deeming 24-Nov-20 3:20am

So compare your HTML markup to the markup from my demo.

h311o 24-Nov-20 3:31am

Well, the footer div is the same, but I didn't copy the content part, just the footer, but it still remains the same. Maybe there's another part of my code that's intefering with it?

Richard Deeming 24-Nov-20 3:32am

Probably. But I can't see your markup, so I don't know.