Footer is not being shown properly on different device heights

Question

I am having a problem with my footer. I have a page with some content and on some devices (like mobile - in zoomed out view), my page content does not fill parent device height while on some devices, it does. The footer is creating a problem with these different heights. When the content doesn't fill the parent device height, the footer is shown correctly at the bottom of the page but when the content fills the parent device height and overflows, the footer is shown over the content.

Footer with content not filling Parent height (shows correctly)

Footer with overflown content (doesn't show correctly)

Picture quality is not that clear but the issue is clearly visible.

This is the CSS code I have been using till now.

#footer{
     display:block;
     margin-right:auto;
     margin-left:auto;
     position:absolute;
     bottom:0;
     height:100px;
     width: 60%;
     text-align:center;
     color:green;
     font-size:18px;
     font-family:Times;
 }

How can this be fixed? I want to show the footer at the end of the page when content is overflown.

Answer 1

on your #main element right before the footer (assuming you are using id="main" for the item with the green border, do the following:

#main {
    margin-bottom: 100px;
}

EDIT:

<div id="wrapper">
  <div id="header"></div>
  <div id="main"></div>
  <div id="footer"></div>
</div>

#wrapper {
    position: relative;
    padding-bottom: 110px;
}