façons de coller le pied au fond une page

Question

je suivais le poste How do you get the footer to stay at the bottom of a Web page? sur stackoverflow ...

Mais je ne pouvais pas le faire fonctionner aussi dans une application web asp.net .... J'utilise un master page pour toutes les pages ...

Comment puis-je faire en sorte que le pied de page reste en bas de la page?

Pour ref:

<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

Je recommanderais également une structure div à l'aide flottante.

Markup:

<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

Je suggère d'utiliser un div comme

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

alors dans votre css mettre ce

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

ou vous pouvez utiliser AjaxControlToolkit bibliothèque

---

Je vous recommande fortement que vous changez votre mise en page du tableau à div

Answer 3

J'ai aimé mieux ci-dessous. Cela ne fonctionne qu'avec un identifiant et non avec une classe.

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