Sticky footer overflow issue?

Question

I am having some trouble with my sticky footer. First of all, my content does not reach the entire bottom of the screen (even underneath the footer .. check on larger monitor). Also, when the window is smaller than the content, the header moves and does not expand 100% in width when you move the horizontal scrollbar. What am i doing wrong?

Here is my testing site: My Site

If you use firebug or Google Chrome's built in Inspect Element, you can see where all the elements are.

Here is some of the css:

.content
{
    width: 1100px;
    margin: 0 auto;
    border-left:1px solid #000;
    border-right: 1px solid #000;
    background:#222;
    min-height: 100%;
    height: 100%;
    padding-bottom:50px; /* Padding for footer (width) */
}

.contentInner
{
    padding:0px 10px 0px 10px;
    min-height: 100%;
    height: 100%;
}
.footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #000; /* So you can see it */
}

Here is what it looks like when the content is bigger than the window:

I would also like the Content to extent all the way down the page with the content!

Answer 1

Edit / add your css like this to get rid of smaller screen issues..

.mainContainer {
  min-width: 1100px;
}

To get that content background to continue all way down, i suggest using centered background image in .mainContainer and remove content background OR just set .content min-height to some large value like 900px OR use javascript to set content height if smaller than screen height.

Answer 2

if you put your .mainContainer to the width of your .content, it will work.

.mainContainer {
    width: 1100px;
}

Is it what you want ?

Answer 3

Replace your CSS to this one.

.content
{
    width: 100%;
    margin: 0 auto;
    border-left:1px solid #000;
    border-right: 1px solid #000;
    background:#222;
    min-height: auto;
    height: auto;
    padding-bottom:50px;
    position:absolute;
}

.contentInner
{
    padding:0px 10px 0px 10px;
    min-height: auto;
    height: auto;
}
.footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #000;
}