html - CSS フッターがページの下部に移動しません

Question

私はこのCSSを持っています:

body,html {
    width:100%;
    height:100%;
    font-family:Calibri;
    position: relative;
    margin:0;
    padding:0;
}

#wrap {
    min-height: 100%;
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -580px; /* the bottom margin is the negative value of the footer's height */
}

.push {
    height: 100px; /* .push must be the same height as .footer */
}

/* header stuff */
#header-topbar {
    width:100%;
    height:30px;
    padding:10px 10px 10px 10px;
    background-color:#a79494;
}
#phone-tel {
    position:block;
    float:right;
    margin-right:16%;
    margin-top:5px;
    font-size:20px;
}
#logo {
    position:absolute;
    float:left;
    margin-left:15%;
    margin-top:-20px;
}

/* main body/content */
#body-content {
    width:70%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
}

/*footer */

私のウェブサイトでは、何らかの理由でフッターがページの下部に表示されません。

プッシュdivを追加してページの下部に移動しようとしましたが、何らかの理由で機能しませんでした。

私にできることはありますか？私もフィドルを作成しました：http://jsfiddle.net/cGGMS/