Link to home
Create AccountLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Make footer stick to bottom

This is my footer now, How can I make it go all the way down?? I tried everything!
User generated image
Css:
.pageContent{
margin:auto;
height:100%;
min-height:100vh;
width: 100%;
background-color: #fafafa;
flex: 1;
position: relative;
} //the whole div of my page
#footer{
display:flex;
justify-content: space-between;
height: 45px;
bottom: 0px;
width: 100%;
background: rgba(24,24,29,0.7);
color:white;
z-index:3;
font-size: 0.76em;
position:absolute;
}//my footer div

Open in new window

Code:
<div class="pageContent">
<div id= "footer" style="position:absolute;">
<span id="copyright" class= "centered uppercase"> Epicured &#169;2016</span>
<span class= "flex">
<a class= "pageLink inlineBlock uppercase" href="contact.php">
<span class="text"> Contact </span>
</a>
<a class= "pageLink inlineBlock uppercase" href="legal.php">
<span class="text"> Legal</span>
</a>

<a class= "pageLink inlineBlock uppercase" href="privacy.php">
<span class="text"> Privacy</span>
</a>
</span>
</div>


</div>

Open in new window

Avatar of Dmitrii
Dmitrii
Flag of Russian Federation image

Have you tried to set:
position: relative;

Open in new window

in #footer?
Avatar of Jazzy 1012
Jazzy 1012

ASKER

yes I tried all different positions, nothing seemed to work
It only works when i do bottom: -200px or more, which is not a logically thing to do
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Just check browser backward compatibility before using flex - if you need to support older browsers you might run into trouble

https://developer.mozilla.org/en/docs/Web/CSS/flex
https://www.w3schools.com/cssref/css3_pr_flex.asp