使頁腳結尾到內容

Question

我想讓我的頁腳直接出現在頁面上的最後一個div後面，我無法弄清楚爲什麼它坐在比我想要的要低的位置。誰能幫忙？ 繼承人的代碼：

<div id="container"> 
    <div id="header"> 
     <h1> 
      <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> --> 
      <a href="#"><img src="tracylogo6header.jpg" alt="Millington and Hope" /></a> 
     </h1> 
     <h2> 
      <!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> --> 
     </h2> 
    </div> 
    <ul id="nav"> 
     <li><a href="index.html">Home</a></li><!-- 
     --><li><a href="stock.html">Stock</a></li><!-- 
     --><li><a href="events.html">Events</a></li><!-- 
     --><li><a href="contact.html">Contact</a></li> 
    </ul> 
    <div id="box"> 
      <a href="#"><img src="home4.jpg" alt="Slideshow Image 1" /></a> 

      <a href="#"><img src="home6.jpg" alt="Slideshow Image 2" /></a> 

      <a href="#"><img src="home4.jpg" alt="Slideshow Image 3" /></a> 
    </div> 
    <div id="box2"> 
     <a href="#"><img src="tracylogosmall.jpg" alt="Logo" /></a> 
    </div> 
    <div id="footer"> 
     <p class="client">Tel: 0785740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: tjdelape@hotmail.co.uk</p> 

    </div> 
</div> 

html,body 
{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

body 
{ 
    background:rgb(171,163,144); 
    text-align: center; 
    min-width: 600px; 
} 

#container 
{ 
    margin:0 auto; 
    background:rgb(171, 163, 144); 
    width:80%; 
} 

#nav 
{ 
    border:1px solid #ccc; 
    border-width:1px 0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
    /*background:rgb(161,153,134) /* for non-css3 browsers */ 
    background: -webkit-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144)); 
    background: -moz-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144)); 

} 

#nav li 
{ 
    display:inline; 
}  

#nav a 
{ 
    display:inline-block; 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    padding:10px 20px 10px 20px; 
    text-decoration:none; 
    color:white; 
} 


#nav a:hover 
{ 
    background:rgb(171, 163, 144); 
} 


#header 
{ 
    padding: 0px; 
    color: white; 
    width:100%; 
    text-align:center; 
} 



#header h1 
{ 
    margin: 0; 
} 

#stock 
{ 
    position:relative; 
    margin:0 auto; 
    margin-top:35px; 
    width: 1000px; 
    border-collapse:collapse; 
} 

#stock th 
{ 
    height: 30px; 
    background:rgb(151,143,124); 
}  
table, td, th 
{ 
    color:white; 
    border: solid 1px black; 
    padding: 2px; 
} 

#events 
{ 
    position:relative; 
    margin:0 auto; 
    margin-top:35px; 
    width: 1000px; 
    border-collapse:collapse; 
} 

#events th 
{ 
    height: 30px; 
    background:rgb(151,143,124); 
} 

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:25px; 
    width:100%; 
    background:rgb(151,143,124); 
    border-top:solid 1px white; 
} 

.client 
{ 
    color:white; 
    margin:3px auto; 
    text-indent:1cm; 
    text-align:left; 
} 

#sold 
{ 
    color: red; 
} 

#box 
{ 
    position:relative; 
    margin:0 auto; 
    width:100%; 
    height:200px; 
    margin-top:100px; 
} 
#box img 
{ 
    margin:0 auto; 
    border:solid 1px white; 
    margin: 10px; 
} 

#box2 
{ 
    position:relative; 
    margin-top:200px; 
    width: 100%; 
} 

#box2 img 
{ 
    margin:0 auto; 
    opacity:0.5; 
    filter:alpha(opacity=50); 

}  



h3 
{ 
    color:white; 
    text-decoration:underline; 
}  



#container2 { 
    clear:left; 
    float:left; 
    width:100%; 
    overflow:hidden; 
    background:rgb(171,163,144); /* column 2 background colour */ 
} 
#container1 { 
    float:left; 
    width:100%; 
    position:relative; 
    right:50%; 
    background:rgb(171,163,144); /* column 1 background colour */ 
} 
#left { 
    float:left; 
    width:46%; 
    position:relative; 
    left:52%; 
    text-align:left; 
    overflow:hidden; 
} 
#right{ 
    float:left; 
    text-align:left; 
    width:46%; 
    position:relative; 
    left:56%; 
    overflow:hidden; 
} 

p 
{ 
    color:white; 
} 

頁腳看起來好像有很大的餘量後，我的最後一個div但我不認爲這是我已經宣佈？

Answer 1

這是你所聲明的。這將迫使格在頁面的底部：

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:25px; 
    width:100%; 
    background:rgb(151,143,124); 
    border-top:solid 1px white; 
} 

可以調整上邊距，如果你想要的，但做這樣的事情，使它看起來底部DIV之後。

#footer { 
    position:relative; 
    left:0px; 
    height:25px; 
    width:100%; 
    background:rgb(151,143,124); 
    border-top:solid 1px white; 
} 

Answer 2

您可以添加padding-bottom: 100px;（或類似值）到你的#container，使它像這樣：

#container { 
    margin: 0 auto; 
    background: #ABA390; 
    width: 80%; 
    padding-bottom: 100px; 
} 

Answer 3

您的頁腳固定在屏幕的底部（位置：固定;底部：0 ），如果您刪除此聲明並將頁腳放置在#container div之外，它應該提供所需的效果。

Answer 4

嘗試了這一點，完美熟代碼頁眉和頁腳分別貼到頂部和底部：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Header & Footer</title> 
     <style type="text/css"> 
      /* Global */ 
      * { 
       margin: 0; 
      } 
      html, body { 
       height: 99%; 
      } 
      /* Header */ 
      .container{ 
       min-height: 100%; 
       height: auto !important; 
       height: 100%; 
       margin: 0 auto -4em; 
       width:100%; 
       font-family:Segoe UI; 
       color:#fff; 
      } 
      .container-header{ 
       padding-top:5px; 
       padding-left:20px; 
      } 

      /* Footer */ 
      .footer{ 
       background-color:#333030; 
       width:100%; 
       font-family:Segoe UI; 
       color:#fff; 
      } 
      .footer img{ 
       padding-left:15px; 
      } 
      /* Page Content */ 
      .content{ 
       height: auto !important; 
      } 
      .container p{ 
      font-size:12pt; 
      font-weight:bold; 
      } 
     </style> 
    </head> 
    <body> 
     <!-- Header Div --> 
     <div class="container"> 
      <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px"> 
       <tr></tr> 
       <tr> 
        <td></td> 
        <td> 
         <div style="padding-left:100px;font-size:36px;">Header</div> 
        </td> 
       </tr> 
       <tr></tr> 
      </table> 

      <!-- Page Content Div --> 
      <div class="content"> 
       Blah Blah 
      </div> 
     </div> 

     <!-- Footer Div --> 
     <div class="footer"> 
      <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px"> 
       <tr></tr> 
       <tr> 
        <td></td> 
        <td> 
         <div style="padding-left:100px;font-size:36px;">Footer</div> 
        </td> 
       </tr> 
       <tr></tr> 
      </table> 
     </div> 
    </body> 
</html> 

乾杯！