html - CSS页脚不会在页面底部向下移动

我有这个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 */

对于我的网站，由于某些原因，页脚不会落在页面底部。

我尝试添加Push div使其向下移动到页面底部，但是由于某些原因而无法正常工作。

有什么想法我能做什么？我也创建了一个小提琴：http://jsfiddle.net/cGGMS/

最佳答案

像这样删除#wrap的负边距：

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

JSFiddle：http://jsfiddle.net/cGGMS/2/

关于html - CSS页脚不会在页面底部向下移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16055599/