Sticky footer when footer has lots of content

Vote count:

0

I am hoping to get some help refining my sticky footer. Below are two pages for reference on how my code is acting now:

http://ift.tt/1i7uDub Page full of content

http://ift.tt/1oins88 empty page (sticky footer test)

My dilemma is I have a lot of content in the footer, and no sticky footer I could find works when both circumstances apply:

1.) The footer contained a lot of content.

2.) mobile view was activated (or browser was resized to small)

Here is my current code:

html {
min-height: 100%;
position: relative;
}
body {
margin:0 0 250px;
padding-bottom:0 !important;
}
.dmbs-footer {
background-color: #F5F5F5;
height: 250px;
position: absolute;
bottom:0;
left:0;
width: 100%;
overflow-y:visible;
border-top:20px solid #FF4C95;
}

.dmbs-footer is the name of the footer from the WP developer's theme I am building from, DevDMBootstrap3 (I am not the one that made it a class & not an ID). Anyways, there is no code in the theme that could be messing with this. I am using bootstrap, although that has nothing do to with this either, I am quite sure.

How it is currently working is that I have the regular type sticky footer, and then within that I have created 3 grid boxes that stack when the browser gets small/mobile mode. They stack below the footer (so while the footer is only 250px, the box stack accumulates to being in excess of 600-700px. MY PROBLEM

When you go to the page 'buying' you'll notice a big blank page and the footer should be sitting there on the bottom. However, you have to scroll some to get to the bottom of the footer?! Essentially the footer is on the bottom, but somewhere along the lines extra space is being generated. I need some help to A.) refine my novice code if needed, and B.) help figure out why users are needing to scroll on these pages where content isn't 100%??

In other words: why is my footer going down past where it should be?

asked 36 secs ago

user3712022

1