Menu
I have a site with two footers. One is very well behaved as a 'fixed' footer that is always visible at the bottom of the page. The other footer is larger and should be below all content, only appearing when all content is scrolled through (if the content is bigger than the page, it shouldn't be visible until you scroll to the bottom). However, it does need to be sticky so that if there's very little content it doesn't ride up and leave an awkward white gap.
Right now it's displaying in the middle of the page. :( Help?
html, body {
height: 100%;
width: 100%;
}
#PageContainer {
width: 100%;
height: 100%;
}
header {
width: 100%;
}
#Content {
position: relative;
background-image:url(Images/Golf%20Ball%20Texture.jpg);
background-repeat:repeat;
background-size: 150px auto;
width: 100%;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
min-height: 90%;
}
footer {
width: 100%;
}
#MovingFooter {
clear: both;
position: absolute;
width: 100%;
background-color: #FFD600;
right: 0;
bottom: 0;
font-size: .9em;
}
#StickyFooter {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #787878;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet" href="../style.css" type="text/css" />
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico">
<title>Your Personality</title>
</head>
<div id="PageContainer">
<header>
</header>
<body>
<div id="Content">
</div> <!--id="Content"-->
<div id="MovingFooter">
<h2>Company Philosophy</h2>
<p>Footer content</p>
</div> <!--class="FooterThirds" -->
</div> <!-- class="ThirdsContainer" -->
</div> <!-- id="MovingFooter" -->
<div id="StickyFooter">
<p class="FancyFinePrint">© Copyright 2014 by <a href="http://www.geneticgolf.com">Company Name</a>. All Rights Reserved.</p>
<div id="FooterPartners">
<p class="FooterPartnerText">Proud Partners With:</p>
</div> <!-- id="FooterPartners" -->
</div> <!-- id="StickyFooter" -->
</div> <!-- id="PageContainer" -->
</body>
220
You're looking for a technique like FooterStickAlt, which keeps the footer below the content, but also keeps the footer at the bottom of the viewport if the content isn't as tall enough to push it down that far.
Put simply, everything except the footer gets wrapped in a containing element which has min-height: 100%, and then the footer is pulled up with a negative top margin. This particular technique necessitates knowing the height of your sticky footer.
https://css-tricks.com/snippets/css/sticky-footer/ and http://cssstickyfooter.com are the same idea.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
