CSS: using float for footer bloat at bottom of page as Quora

I want to have a footer at the bottom. At first, I use position: fixed

.page-foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #F6F6F6;
    height: 400px;
    border-top: 1px solid #eee;
}

But using this way, I meet some issues such as debug on Chrome Developer Tool, I cannot see other section of html file because my footer is big.

I study their source code and see that Quora page using float as below

.page-foot {
    float: left;
    position: relative;
    border-top: 1px solid #eee;
    background: #f6f6f6;
    width: 100%;
    min-width: 1020px;
    height: 400px;
}

Here is example image that I can debug footer with Chrome Developer Console:

And when I zoom out page, the footer still at bottom of page:

This method can solve above problem (I can scroll to another section when debugging). But the footer just stands at below of page if other content (such as header + main content) has enough space and this footer will shadow some content of main content.

I see that Quora doesn't meet this problem. Their footer always stands at bottom, and no content of main content is covered.

I want to know how can they do this ?

Thanks :)

You need to give your content area padding-top which is equal to the header's height, and padding-bottom which is equal to the footer's height.