We help IT Professionals succeed at work.

Make footer stick to bottom

Jazzy 1012
Jazzy 1012 asked
on
180 Views
Last Modified: 2017-03-20
This is my footer now, How can I make it go all the way down?? I tried everything!
see.png
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

Comment
Watch Question

Dmitriiconsultant
CERTIFIED EXPERT

Commented:
Have you tried to set:
position: relative;

Open in new window

in #footer?

Author

Commented:
yes I tried all different positions, nothing seemed to work

Author

Commented:
It only works when i do bottom: -200px or more, which is not a logically thing to do
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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