Make footer stick to bottom

Jazzy 1012
Jazzy 1012 used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Can you show us the whole page.

Pushing footer to the bottom of the page so that it is responsive to content that may be longer than the page (i.e. the footer sticks to the bottom when content height is less than window height but is pushed below the fold when content is longer than window height) requires doing the following

<!doctype html>
<html>
<head>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  min-height: 100%;
  height: 100%;
}

.content {
  min-height: 100%;
  padding-bottom: 100px;
  background: green;
}
footer {
  height: 100px;
  margin-top: -100px;
  background: blue;
  color: white;
  text-align: center;
}
</style>
</head>
<body>
<div class="content">
  <p>this is the content to show what the page looks like</p>
</div>
<footer>
  This is the footer
</footer>
</body>
</html>

Open in new window


Working sample here
For aligning footers, I use flex layouts a lot, as it looks like you're trying to above, but without seeing the full code, tough to tell.
In any case, with flex layouts, the main thing is to have both items in the same parent container, set the main content to grow and fill, and the footer to just take up whatever space it needs.

Using flex layouts allows the footer to still take up whatever space it needs, without forcing a specific height.

<html>
<head>
    <style>
        body { display: flex; flex-flow: column; margin: 0; padding: 0; }
        main { flex: 1 1 auto; background: #ff0000; }
        footer { flex: 0 0 auto; background: #00ff00; }
    </style>
</head>
<body>

    <main>
        <p>page content...</p>
    </main>

    <footer>
        <p>footer content...</p>
    </footer>

</body>
</html>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial