1

When I view the website on a mobile device, the footer div is halfway up the page (on my desktop PC its at the bottom).

Nothing yet as not sure where to start. tried position:absolute; in the CSS of the footer to no avail.

CSS

#footer {
    width:1460px;
    height:80px;
    background-color:#FF0;
    font-weight: bold;  
}

HTML

<div id = "footer"> <script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    function scrollToBottom() {
        $('html, body').animate({scrollTop:$(document).height()}, 
'slow');
    }
    function scrollToTop() {
        $('html, body').animate({scrollTop:0}, 'slow');
    }
</script>
<a href="javascript:scrollToTop()"><img src="images/scroll.png" 
alt="Scroll to Top" title="Scroll to Top" width="42" height="37" 
hspace="65" vspace="20" />                 </a><a 
href="http://www.facebook.com/woodzyweb" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('Woodzy','','images/wwd_roll.png',1)"><img 
src="images/wwd.png" alt="Visit Our web Designer Facebook Page" 
name="Woodzy" width="150" height="47" border="0" id="Woodzy" /> 
</a>website designed by:</div>

No error messages that I'm aware of; just wish to fix footer to the bottom.

j08691
  • 204,283
  • 31
  • 260
  • 272
user3830239
  • 11
  • 2
  • 1
    Possible duplicate of [How to stick a footer to bottom in css?](https://stackoverflow.com/questions/1488565/how-to-stick-a-footer-to-bottom-in-css) – Ted Brownlow Aug 24 '19 at 22:33

1 Answers1

0

There is a few ways to go about it, you could either change the #footer css to:

#footer {
    width:1460px;
    height:80px;
    background-color:#FF0;
    font-weight: bold;
    position: absolute;
    bottom: 0; 
}

You could also set the div that contains all the content above the footer to be a minimum height of the viewport:

#container {
    min-height: 100vh;
}
Derek
  • 850
  • 9
  • 19
  • Have tried this on the "charities that we've helped page" (www.perrywoodcharityday.000webhostapp.com /charities.html) but still shows up incorrectly when I view on mobile so I'm guessing my amateur knowledge has meant I've messed up elsewhere. Can anyone view the page source and advise? – user3830239 Aug 25 '19 at 23:34
  • The url for your website is broke – Derek Aug 26 '19 at 00:23
  • Sorry, it should be this one - https://perrywoodcharityday.000webhostapp.com/charities.html – user3830239 Aug 26 '19 at 07:56
  • never mind you want it to be position: fixed; if you are talking about the footer always being present – Derek Aug 26 '19 at 19:50