在頁面底部放置頁腳

我想在頁面底部放置頁腳。它包含在一個div中。問題是，如果我使用固定位置，頁腳會粘在底部，但如果我向上滾動頁面，則不會消失。如果我使用絕對或相對定位，頁腳顯示在頁面中間。在頁面底部放置頁腳

我希望它留在底部，但它不應該粘滯，即向上滾動時，頁腳必須消失。當我向下滾動到底部併到達頁面末尾時，它必須顯示。

PS：該頁面包含一個iframe。

HTML

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>Help</title> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
     <div id="header"> 
      <img id="logo" src="images/logo.png" alt="Logo"> 
     </div> 
     <div id="menu"> 
      <ul> 
       <li><a href="about.html" target="content">About</a></li> 
       <li><a href="support.html" target="content">Support</a></li><br> 
       <li>Student Operation 
        <ul> 
         <li><a href="logging_in.html" target="content">Logging In</a></li> 
         <li><a href="creating_enquiry.html" target="content">Creating Enquiry</a></li> 
         <li><a href="issuing_prospectus.html" target="content">Issuing Prospectus</a></li> 
         <li><a href="making_admission.html" target="content">Making Admission</a></li> 
         <li><a href="collecting_fees.html" target="content">Collecting Fees</a></li> 
         <li><a href="issuing_kit.html" target="content">Issuing Kit</a></li> 
        </ul> 
       </li><br> 
       <li> 
        Batch Operation 
        <ul> 
         <li><a href="creating_batch.html" target="content">Creating Batch</a></li> 
         <li>Marking Attendance</li> 
         <li>Transferring Batch</li> 
        </ul> 
       </li><br> 
       <li> 
        Resource Operation 
        <ul> 
         <li>Center Resource Allocation</li> 
         <li>Student Resource Allocation</li> 
        </ul> 
       </li><br> 
       <li> 
        Course Operation 
        <ul> 
         <li>Course Type</li> 
         <li>Course List</li> 
         <li>Course Module</li> 
         <li>Course Price List</li> 
         <li>Distance University List</li> 
        </ul> 
       </li><br> 
       <li> 
        Inventory Operation 
        <ul> 
         <li>Kit Management</li> 
         <li>Item Category</li> 
         <li>Item Stock</li> 
         <li>Item Purchase</li> 
        </ul> 
       </li><br> 
       <li> 
        Admin Operation 
        <ul> 
         <li>Kit Validation</li> 
         <li>Users & Groups</li> 
         <li>Employee Management</li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <div id="frame"> 
      <iframe id="content" name="content"></iframe> 
     </div> 
     <div id="footer"> 
      <p>Footer text</p> 
     </div> 
    </body> 
</html>

CSS

body { 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
    font-size: 80%; 
} 

#header { 
    background-color: #f8651c; 
    padding-bottom: 5%; 
    margin: 0; 
    border: 0; 
} 

#logo { 
    position: relative; 
    left: 20px; 
    top: 20px; 
} 

#menu { 
    width: 25%; 
    float: left; 
    border-right: 2px solid #a2a2a2; 
    margin: 0; 
    padding: 0; 
} 

#content { 
    position: absolute; 
    height: 93%; 
    width: 74%; 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

#footer{ 
    position: fixed; 
    left: 0; 
    bottom:0; 
    background-color:#000; 
    width:100%; 
    height: 10px; 

}

來源

2013-08-24 lichborne

像這樣

DEMO

CSS

#footer{ 
    position: relative; 
    left: 0; 
    bottom:0; 
    background-color:#000; 
    width:100%; 
    bottom:0; 
    padding:5px 0; 
} 
.clearfix{ 
    clear:both; 
} 
#footer p{ 
    color:white; 
}

來源

2013-08-24 07:08:13 falguni

它很簡單。只需添加修改您的頁腳css

#footer{ 
    background-color:#000; 
    width:100%; 
    color:#fff; 
    float:left 


}

來源

2013-08-24 07:43:16

您可以做一件事，頁面滾動某個高度或滾動事件後，您可以隱藏該div。

$(window).scroll(function(e){ $('#log').hide(); });

來源

2013-08-24 07:59:01 Chandan

在頁面底部放置頁腳

回答

相關問題