HEADER

The Footer

How to give the appearance that the footer is hitting the bottom of the window

The background color for the header and the footer is actually the background-color of the body
body{

background-color: #e9eeef;

}

 

The white background is the color of a div #bac, it needs to be 100% width so that it can stretch the whole width of the browser window.
#bac{
position: relative;
background-color: #fff;
left: 0px;
width: 100%;
height: auto;
}

 You will still need to either have a div as a wrapper  to center the content in the middle of the browser.

#wrapper{
position: relative;
width: 940px;

margin-right: auto;

margin-left: auto;
height: auto;

}

If you do not use a wrapper this information needs to be placed on the header, main and footer.

The footer can never be inside the wrapper because that is what is pushing down the #bac.

The #bac needs to close before the footer.