Question

我想在页面底部添加一个页脚，但是它会像标题内容一样保留在中间位置，并且忽略下面的内容，所以他会保持在中间位置。

<div id="content">
        <ul>
            <li>
                <h3>Custom clearance</h3><br/>
                <img src="images/1st_min.png" style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
                <p style="width:360px;">Our employee proceeds the necessary customs documentation for exports, imports and transit of cargo. Our knowledge of the Latvian customs and tax legislation and our familiarity with.<br /><a href="#" style="float:right; padding-top:10px;">Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px;"/></a>
                </p><br/>
            </li>
            <li>
                <h3>Cargo Inspections</h3><br/>
                <img src="images/2nd_min.png" style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
                <p style="width:360px; padding">
                        Наш сотрудник переходит необходимой документации для таможенного экспорта, импорта и транзита грузов. Наши знания латышского таможенного и налоговогои.<br /><a href="#" style="float:right; padding-top:10px;">Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px;"/></a>
                </p><br/>   
            </li>
            <li>
                <h3>Our Location</h3><br/>
                <img src="images/3rd_min.png" style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
                <p style="width:360px;">
                        Mūsu darbinieks ieņēmumi nepieciešamo muitas dokumentāciju, eksporta, importa un tranzīta kravas. Mūsu zināšanas par Latvijas muitas un nodokļu tiību aktus un mūsu.<br /><a href="#" style="float:right;  padding-top:10px;">Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px;"/></a>
                </p><br/>

            </li>
        </ul>       
    </div>

内容类样式

#content {
    width: 100%;
    height:100%;
    display: block;
}
 #content ul li {
    display: block; 
    list-style: none;
    float: left;
    min-width:15%;
}


#content  ul li > h3 {
    text-decoration: none;
    display:block;
    float:left;
    font-size: 24px;
    margin: 0 0 0 20px;
    font-family: gothamlight;
    padding: 10px 20px 10px 20px;
 }
 #content  ul li > img {
    display: block;
    float:left;
    margin: 0 0 0 10px;
    padding: 0px 25px 0px 25px;
 }

  #content  ul li > p {
    text-decoration: none;
    line-height: 1.3;
    display:block;
    color: #404041;
    float:left;
    font-size: 14px;
    margin: 0 0 0 20px;
    padding: 5px 20px 5px 20px;
    display: block;
 }

这是页脚风格，可以。

 #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
 }

Answer 1

将位置更改为固定

#footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
 background:#6cf;
 }

Answer 2

#footer{position:absolute;bottom:0; clear:both;}

页脚忽略中间的内容

2 个答案: