CODEWITHSUNDEEP
htmlcss
MrWeb
MrWeb

Reputation: 91

Sticky footer isn't working

I just need a sticky footer for my mobile ui. (not fixed) I did a research and played with these codes.

Main div

.public-profile {
    background-color: #30b29e;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

Footer

.pulic-profile-score {
    text-align: center;
    background-color: #2ba08e;
    padding: 15px;
    color: white;
    bottom: 0;
    position: absolute;
}

enter image description here

As you can see it's not stayed at the bottom of the page. It's placing on main div bottom area and showing white space area. I'm confused. I already gave 100% height to the main div but it's not placing on bottom of the page. If I change it to fixed, it shows white gap between footer and content area. What am I missing here?

enter image description here

Upvotes: 0

Views: 92

Answers (4)

yanguya995
yanguya995

Reputation: 143

On this class add these

.pulic-profile-score { 
position: fixed;
min-height:10%;// 10% of the main Div
}

Upvotes: 0

CloudBranch
CloudBranch

Reputation: 1604

You could use position:sticky, but be aware of it's current support. Check it out here.

Upvotes: 0

Wim Mertens
Wim Mertens

Reputation: 1790

you would need to change position from absolute to fixed

Upvotes: 0

Tunahan Bayındır
Tunahan Bayındır

Reputation: 489

Try min-height:100%; in .public-profile

Upvotes: 1

Related Questions