Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

How to make footer stick to bottom

This is what I have
User generated image
Here is my css:
#footer{
display:flex;
justify-content: space-between;
height: 45px;
bottom: 0;
width: 100%;
background: rgba(24,24,29,0.7);
color:white;
z-index:3;
font-size: 0.75em;
}
#copyright{
margin-left: 10px;
border-bottom: 3px solid rgba (207,86,48,0);
}
.centered{
margin: auto 0px;
}
#footer>span{
align-self:center;
}
.uppercase{
text-transform: uppercase;
}

Open in new window


My HTML:
<div id="footer">
<span id= "copyright" class = "centered uppercase"> ;2016</span>
<span class= "flex">
<a class = "pageLink inlineBlock uppercase" href = "#">
<span class= "text"> Contact </span>
</a>
<a class = "pageLink inlineBlock uppercase" href = "#">
<span class= "text"> Legal </span>
</a>
<a class = "pageLink inlineBlock uppercase" href = "#">
<span class= "text"> Privacy</span>
</a>
</span>
</div>

Open in new window


It is inside the div of the image.
How can I make it stick to the bottom, it doesnt seem to work?
Avatar of Paweł
Paweł
Flag of Switzerland image

you can use position fixed
http://codepen.io/chooch/pen/LxmmOd
Avatar of Jazzy 1012
Jazzy 1012

ASKER

If I do position:fixed; itll be there even if im at the top of the page, I just want the footer at the end of the page, like when i finish scrolling i see it.
just leave the position alone and make it your final html element

check teh code pen again
ASKER CERTIFIED SOLUTION
Avatar of Shaun Vermaak
Shaun Vermaak
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I did, but it overrides the background image by going up like I have displayed
what do you mean background image? what's the background image set on? i have a feeling that your footer is fine the problem is somewhere else
look at the pen again
Look at the image I have attached above, when I zoom out, my footer goes up. This is my issue, I have alot of other things on the page, this section, I added the footer to it since it is the last section and I want it to be transparent to the image.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial