Blank Space Between content and sticky foot

So after setting my sticky menu, this blank space appears between content and the footer. I don’t have a lot of content so if a zoom out the page, this blank space goes bigger and bigger.

If i remove the sticky footer, it sticks to the content so goes up and I can see the background color under the footer.

this is the code i used for sticky footer:

#wrapper {
background: none repeat scroll 0 0 #ffffff;
box-sizing: border-box;
min-height: 100%;
padding: 0 0 40px;
position: absolute;
width: 100%;
}
#main {
height: 100%;
margin: 0;
padding: 0;
}
#footer {
background-color: #313131;
color: #747474;
bottom: 0;
left: 0;
height: 40px;
position: absolute;
width: 100%;
}