Jazzy 1012
asked on
How to make footer stick to bottom
This is what I have
Here is my css:
My HTML:
It is inside the div of the image.
How can I make it stick to the bottom, it doesnt seem to work?
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;
}
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>
It is inside the div of the image.
How can I make it stick to the bottom, it doesnt seem to work?
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
check teh code pen again
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://codepen.io/chooch/pen/LxmmOd