方式堅持頁腳底部的網頁

Question

我跟着How do you get the footer to stay at the bottom of a Web page?崗位上計算器...

但我不能讓它在一個asp.net web應用程序工作過....我使用的是所有頁面的母版頁...

我該如何讓頁腳粘到頁面的底部？

對於裁判：

<table width="100%" cellpadding="0" cellspacing="0"> 
<tr> 
<td> 
<table width="100%" cellpadding="0" cellspacing="0" class="bgpatt"> 
<tr style="height:25px;"> 
<td style="width:40%"> 

</td> 
<td style="width:30%"> 

</td> 
<td style="width:30%;" valign="top"> 

    <div id="headermenu" style="width:300px;"><ul style="width:300px;"> 
      <li><a title="Home" href="#" class="headerhome">Home</a></li> 
      <li><a title="About Us" href="#" class="aboutus">About Us</a></li> 
      <li><a title="Contact Us" href="#" class="contactus">Contact Us</a></li> 
      <li><a title="Feedback" href="#" class="feedback">Feedback</a></li> 
      <li><a title="Logout" href="#" class="logout">Logout</a></li>  
      </ul></div> 
    </td> 
</tr> 
<tr style="height:25px;"> 
<td colspan="3"> 

</td> 
</tr> 
<tr style="height:25px;"> 
<td colspan="3"> 

</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr valign="top"> 
<td> 
<table width="100%" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td> 
       <table width="100%" cellpadding="0" cellspacing="0"> 



     <tr style="height:5px; background-color:#404040;"> 
      <td colspan="3" valign="top" style="width:100%"> 
       </td> 
     </tr> 
      </table> 
       </td> 
     </tr> 
    </table> 
</td> 
</tr> 
<tr> 
<td> 
<table width="100%" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td style="width:45%;"> 

    </td> 
    <td style="width:45%;"> 
    <div id="header" style="width:300px;"><ul id="mainMenu" runat="server"> 
       <li id="mainHome" runat="server"><a href="#" title="Home" class="home"><span></span>Home</a></li> 
       <li id="mainManage" runat="server"><a href="Users.aspx" title="Manage" class="manage"><span></span>Manage</a></li> 
       <li id="mainEnquiry" runat="server"><a href="account.aspx" title="Enquiry" class="enquiry"><span></span>Enquiry</a></li> 
       <li id="mainReport" runat="server"><a href="EnquiryReport.aspx" title="Report" class="report"><span></span>Report</a></li> 

      </ul>  

</div> 


    </td> 
    <td style="width:10%;"> 

    </td> 
    </tr> 
    </table> 
</td> 
</tr> 
<tr> 
<td> 
<table cellpadding="0" cellspacing="0" width="100%"> 
<tr valign="top"> 
<td style="width:1px;"><div style="width:1px; height:450px;"></div></td> 
<td style="width:95%"> 
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

    </asp:ContentPlaceHolder> 
</td> 
<td style="width:5%"> 
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server"> 
</asp:ContentPlaceHolder> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
<div class="wrapper"></div> 
</td> 
</tr> 
<tr> 
<td> 
<table cellpadding="0" cellspacing="0" width="100%" style="height:25px;"> 
<tr> 
<td></td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height:35px; top:10px;" class="footer"> 

             <tr> 

             <td style="width:100%;" align="center"> 


              <a href="#" class="footer">Home </a>| 

              <a href="#" class="footer">About us </a>| 

              <a href="#" class="footer">Contact us </a>| 

              <a href="#" class="footer">Feedback </a> 

              </td> 

               </tr> 


              <tr> 
              <td style="width:100%;" align="center" class="footer_text"> 
              Copy Rights Xavytechnologies 

              </td>  

              </tr> 


            </table> 
</td> 
</tr> 
</table> 

Answer 1

我也建議使用浮動一個div結構。

標記：

<div class="bodyWrap"> 
    <div class="header"> 
    <!-- Insert content here --> 
    </div> 
    <div class="content"> 
    <!-- Insert content here --> 
    </div> 
    <div class="footer"> 
    <!-- Insert content here --> 
    </div> 
    <div style="clear:both"></div> 
</div> 

的CSS：

.bodyWrap 
{ 
width: 500px; 
} 
.header, .content, .footer 
{ 
width: 100%; 
float:left; 
} 

Answer 2

我建議使用像

<div id="Footer"> content </div> 

然後在你的CSS把一個div這個

#Footer 
{ 
    position: absolute; 
    bottom: 0px; 
    height: 3px; 
    background-color: #666; 
    color: #eee; 
} 

，或者您可以使用AjaxControlToolkit庫

---

我也強烈建議您從表更改佈局div的

Answer 3

我下面更喜歡的。它只適用於一個id而不是一個類。

<div id="Footer"> content </div>  
#Footer { 
        position: fixed; 
        bottom: 0px; 
     }