Force footer to the bottom of page

Question

I have a page where the content is little so I have pushed down the footer to stay at the bottom always.It works fine. But the problem is I have background color for content div.So naturally I am getting a white space for the padding I have used.

Code:

<div id="holder">
    <div class="full_width_header">Some content</div>
    <div id="featuredbg">
        <p>Body Content</p>
    </div>
    <div class="menubg"></div>
</div>

You can see what I mean

Full page jsfiddle - http://jsfiddle.net/squidraj/K3Htx/2/embedded/result/

jsfiddle - http://jsfiddle.net/squidraj/K3Htx/2/

Is it possible to coverup that white space using the color used in content part but not using the color in body class.

Answer 1

If you don't want to add a background colour to the body tag all you need to do is remove the padding from the featuredbg div and add a height value. You'll also need to add a height value to the main wrapper (holder) so that you maintain the height: 100% in css.

Code would be as follows:

#holder {
    min-height: 100%;
    height: 100%;
    position: relative;
}

#featuredbg {
    background: #453A7E;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    height: calc(100% - 110px);
}

The height value in featuredbg takes the 100% of the available space and minuses the height of your footer (menubg). If you just had 100% the footer would be ignored and the featuredbg would stretch past the footer.