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!
Make footer stick to bottom
This is my footer now, How can I make it go all the way down?? I tried everything!
Css:
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
<div class="pageContent">
<div id= "footer" style="position:absolute;">
<span id="copyright" class= "centered uppercase"> Epicured ©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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
Working sample here
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>
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.
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>
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
https://developer.mozilla.org/en/docs/Web/CSS/flex
https://www.w3schools.com/cssref/css3_pr_flex.asp
Premium Content
You need an Expert Office subscription to comment.Start Free Trial