Search code examples
sticky-footer

Forcing div/image to bottom of screen regardless of the screen size

EDIT 10.12am 17th April.`Your jsfiddle and on the emulator works perfectly and as I would expect however I am having no luck. My html is 

<img src="/images/mobile/m_tech_fuss.png" alt="Payco Tech logo" width="100%">
<div id="wrap">
<div id="main">
<div><a href="page/127/Tech-Welcome.asp"><img src="images/mobile/m_tech_welcome.png"  width="100%" /></a>
</div>
<div><a href="page/125/Tech-Guide-to-Self-Employed-Contracts.asp"><img src="images/mobile/m_tech_self_e-contracts.png" width="100%" /></a>
</div>
<div><a href="page/126/Tech-The-Opt-Out-Notification-Explained.asp"><img src="images/mobile/m_tech_optout.png" width="100%" /></a>
</div>
</div>
</div>
<div id="footer"><a href="page/92/Self-Employment.asp"><img  src="images/mobile/m_tech_soundsgood.png" width="100%" /></a>
</div>

and css is exactly as you stated however not only does this not move the orange footer image at all but it also messes with my homepage layout :(

EDIT: 5.10pm 6th April

I found a guide which appears to work ok http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

The orange footer stays at the bottom on any mobile screen however there is still some a gap between the last bit of content and the footer which forces me to scroll down whereas on a page where there is little content, the footer should just be sitting there already. Also this guide has messed up with my green strip images which are now no longer 100% in width :(

Here is my code:

<div id="container">
<div id="header"></div>
<div id="body">
<div><a href="page/127/Tech-Welcome.asp"><img src="images/mobile/m_tech_welcome.png" width="100%"></a></div>
<div><a href="page/125/Tech-Guide-to-Self-Employed-Contracts.asp"><img src="images/mobile/m_tech_self_e-contracts.png" width="100%"></a></div>
<div><a href="page/126/Tech-The-Opt-Out-Notification-Explained.asp"><img src="images/mobile/m_tech_optout.png" width="100%"></a></div>
</div>
<div id="footer"><a href="page/92/Self-Employment.asp"><img src="images/mobile/m_tech_soundsgood.png" width="100%"></a></div>
</div>

and my css

`}
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#fff;
padding:10px;
}
#body {
padding:10px;
padding-bottom:70px;   /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:70px;   /* Height of the footer */
content:url("../images/mobile/m_tech_soundsgood.png");
}
#container {
height:100%;
}`
Solution

  • If all you want is for that image to always sit at the bottom of the screen, it looks like you are making it a bit too complicated. Try:

    div#content
{
  position: fixed;
  bottom: 0px;
}

    To get CSS sticky footer to work you can't have any content outside of the #wrap or the #footer divs or it will mess up the height calculations. It will push the #wrap div, which has a min-height of 100%, down the page. This means that the bottom of the #wrap div is lower than the bottom of the screen. Resulting in unreliable behavior. Especially if the height of the content outside the #wrap or the #footer divs is of variable height, which is what was happening in this particular case.

    You can either place a header inside the #wrap div in a config much like this:

    <div id="wrap">
  <div id="header">
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Main content -->
  </div>
</div>
<div id="footer">
  <!-- Footer content -->
</div>

    Or you can leave it outside of the #wrap and #footer div and compensate by adding a padding-top value equal to the height of the header on the #main div. This is to stop the content inside the #main div from rendering over the top of the header outside of the #wrap and #footer divs.