Question

我在我的网站上使用这个css代码，但页脚似乎并没有在所有内容下推到页面底部。我已经创建了一个小提琴，所以你也可以看到html代码：http://jsfiddle.net/LQKns/但我不太确定问题是什么：/

任何人都可以帮忙...

* {
    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; }

Answer 1

如果页脚位于内容的正下方，两者之间有一些差距，我会删除所有min-height，height和否定margin声明并添加一个小{{1页脚。虽然margin-top已经提供了一个小差距

<div style="clear: both; height:60px;">

请参见精简JSFiddle

Answer 2

你也可以试试这个：

.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 -->

css页脚没有推到页面底部

2 个答案: