DEV Community

loading...

Discussion on: How to make footer stick at the bottom of web page.

Collapse
naren67 profile image
naren67

grab that footer's class and do this
for example

.footer{
position:absolute;
bottom:0;
}

thats it

Collapse
bgrand_ch profile image
Benjamin Grand

Nope, not the same.

With the example of this article, the footer is pushed to the bottom.

With your example, the footer is placed to the bottom, above all elements.

Collapse
eduardonwa profile image
Eduardo Cookie Lifter

The footer placed above all elements, isn't that what we're still looking for? I mean it's still at the bottom of the page, unless it's on top of another element then yes, that's not what we want

Thread Thread
cpmech profile image
Dorival Pedroso

I suppose the goal is to handle the cases: do we have more content that needs to push the footer down? is the screen big enough so the footer can stay at the bottom? I use grid for this reason. See the example from here css-tricks.com/the-holy-grail-layo... where you can see what happens to the footer when you expand Article.

Collapse
naren67 profile image
naren67

.footer{
position:fixed;
bottom:0;
}
a quick update use position fixed instead of absolute

Collapse
dn_josh profile image
Dumte

This is the one I'm familiar with

Collapse
chaitanyavsh profile image
Chaitu Maverick

This is the coolest one TBH. :)

Collapse
nehalahmadkhan profile image
Nehal Ahmad Author

Benjamin Grand is right.

Collapse
thecerealcoder profile image
Chris

This could work, but I believe you would also need a margin-bottom the exact height of the footer element added to your page content, otherwise you run the risk of having the footer on top of things.

Collapse
naren67 profile image
naren67

yes,I mean position fixed would work better instead of position absolute