0

我正在为我的网站使用这个 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; }
4

2 回答 2

0

你也可以试试这个：

.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 -->
于 2013-05-09T01:40:08.987 回答
0

如果页脚应该在内容的正下方，两者之间有一些差距，我会删除所有的min-height,height和否定margin声明，并margin-top在页脚中添加一个小的。虽然<div style="clear: both; height:60px;">已经提供了一个小的差距

html, body, #wrap {
    width: 100%;
    font-family: Calibri;
}

#wrap {
}

查看精简的JSFiddle

于 2013-05-08T23:09:24.463 回答