Footer won't stay at bottom
I am trying to figure out how to get the footer of this page, https://testmage.cluster.helpmefence.com/store/resources-1.html, to stay at the bottom. I cannot recreate this in codepen because many files go into making our pages. Any help would be appreciated. TIA!
41 Replies
I prefer the Grid method personally but both are valid and work well. Just watch out with strict heights (use min-height) and viewport units as mobile might miss behave.
This means I have to turn the body or container for the whole page into a grid or flex box, correct?
I can't do that. Our pages are very complex and won't be the same if I change then to flex or grid
Yes and if that is the case use a wrapper
I read about that solution. I also achieved what I want with Javascript, but it delays and my boss didn't like the delay.
We have a wrapper in place
You don't want a JS solution
I found that outr
heheh
We have a .main-container and a .wrapper on each page
You have the solution figure out how to implement it
Okay, but I can't figure it out. That's why I'm here asking for help. I have turned the wrapper into a flex box, but justify does nothing. I put flex on .page, which is the content on the page and when I used justify, it made all the divs very big and stretched out.
The page you linked?
Yes
So again I would use grid. You will need to give .wrapper height: 100%
This is a bit unrelated but looking at the source of the page I recommend checking out a css methodology like BEM. Your class names are going to get unmaintainable very quickly imo
noooo BEM is horrible (spicy take)
I'm at my job. The classes are what they and have always been that way, I can't change them. They are 10 years in the making.
If they have a Design System you will use it that is what it is and probably best 😄
Okay, it's hard to see the screenshot you shared, I put all the styling on the elements that I could see and the page isn't right.
Also, this is our test site, so it might look unkempt.
is all i did
not sure why I can't min-height the wrapper and I'm still drinking coffee but .. all the content looks like it falls into page so it should be fine.
oh you could make it grid/flex it probably would
mmm it will but there is some ::after below .page I have no clue why
that looks like some 10year old code lol clear float fix? idk
Yes, it's been reworked and reworked and reworked over and over and over again. I have been weeding through our 20k line-long master css file and deleting anything that is no longer sued, but it is a work in progress.
I have those styles on the elements now and it doesn't work.
Did you look at the css for those elements?
I have a min-height set on the wrapper already.
but without grid its doing 0
Grid is set on the .page class
as a block element its not going to expand less its strict height: 100% like body/html
cause.... browsers.. css blah blah lol
I swear it used too honestly but I wont get into that
haha
I have the wrapper set to 100% min-height
make it grid and delete that ::after lol
I really have no clue what that is for
I mean make sure you don't need it first ofc
but looks like some old float hack code left behind from the early 2000's
Oh, okay. Make the wrapper a grid or .page a grid? Yes, probably.
both yes
so page and wrapper needs to be a grid?
to accept a min-height: 100% yes
cause you have to pass that height down if that makes sense
Yes it does.
% can only be of its parent so 😄
Okay the :after is gone!
ok this link must not be updated xD, lemmi know if you still have troubles update the demo for me and I'll gander at it.
You have to ctrl+f5 on chrome to clear the cache.
I added grid to the wrapper and it worked, but everything is centered.
IT'S WORKING! THANK YOU SO MUCH! AGAIN!
You are a life saver!
w00t gj!
also np I had the time sitting here procrastinating so glad I could help 😄
Yes, thank you for your intelect.
You shouldn't procrastinate, nothing gets done. lol Have a fantastic day!
you too!
You're a very good person for just being here to help people. It doesn't go unnoticed.