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 に答える