Html css页脚未推到页面底部

我正在为我的网站使用这个css代码，但页脚似乎并没有在所有内容下推到页面底部。我创建了一个提琴，这样您也可以看到html代码：但我不太确定问题出在哪里：/

有人能帮忙吗

* {
    margin:0;
    padding:0;
}

html, body, #wrap {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family:Calibri;
}
#wrap {
    min-height: 100%;
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -580px 0; /* the bottom margin is the negative value of the footer's height */
}

#slider-wrap {
    width:100%;
    margin:0 auto 0 auto;
}

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

这是我的页脚css：

/* FOOTER */
#footer {
    width:100%;
    height:580px;
    border-top:4px solid #ed1c24;
    background-color:#eeeeee;
}
#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
    height:inherit;
}
#footerTop {
    width:100%;
    height:480px;
    padding-top:10px;
    border-bottom:2px #000000 solid;
}
#footerTopLeft {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopMid {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopRight {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    padding:0 15px 10px 15px;
}

#enquiryForm                    { clear:both; padding:8px 40px 0 0;  }
.enquiryField                   { clear:both; padding:5px 0; }
.enquiryField label             { clear:none; float:left; }
.enquiryField input             { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea          { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }

.enquiryError                   { clear:both; color:#fff; font-family:Calibri; }
#enquirySent                    { color:#fff; font-family:Calibri; }

---

如果页脚正好位于内容下方，并且两者之间有一些间隙，我将删除所有

min height

、

height

和负

margin

声明，并向页脚添加一个小的

margin top

。虽然

已经提供了一个很小的差距

html，body，#wrap{
宽度：100%；
字体系列：Calibri；
}
#包裹{
}

---

请参阅精简版

您也可以尝试以下方法：

.footer {
    bottom:0px;
    left: 0px;
    right:0px;
    margin-top:-60px;
    line-height: 60px;
    height:60px;
}
#capsule { 
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
    left: 8.5%;
    width: 83.00%;
    vertical-align: middle;
}
#bottom { 
    margin: 0;
    padding: 0;
    vertical-align:bottom; 
    float: left;
    left: 1%;
    width:360px;
    top: 0px;
} 
#bottomright { 
    margin: 0;
    padding: 0;
    vertical-align:bottom; 
    float: right;
    left: -13%;
    width: 40%;
    top: 90px;
    text-align: center;
} 




<!-- FOOTER -->
    <div class="footer">
        <div id="capsule">
            <div id="bottom">
                HTML Ipsum Presents
            </div>
            <div id="bottomright">
                    Copyright 2013® - All rights reserved.
            </div>
         </div>
    </div>
    <!-- END OF FOOTER -->

.footer{
底部：0px；
左：0px；
右：0px；
利润上限：-60px；
线高：60px；
高度：60px；
}
#胶囊{
保证金：0；
填充：0；
位置：相对位置；
浮动：左；
左：8.5%；
宽度：83.00%；
垂直对齐：中间对齐；
}
#底部{
保证金：0；
填充：0；
垂直对齐：底部对齐；
浮动：左；
左：1%；
宽度：360px；
顶部：0px；
} 
#右下{
保证金：0；
填充：0；
垂直对齐：底部对齐；
浮动：对；
左-13%；
宽度：40%；
顶部：90px；
文本对齐：居中；
} 
HTML Ipsum呈现
版权所有2013®-保留所有权利。

看看这个。或者这个。你的布局不正确。你需要确保你的“push”div在你的wrap div中我不希望页脚是静态的/固定的，只是被推到页面内容的下面，而不是正好在页面内容的下面-即使内容有两行长，内容和页脚之间仍然有一点间隙