Способы прикрепить нижний колонтитул вниз страницы - PullRequest
Новая
       21

Способы прикрепить нижний колонтитул вниз страницы

3 голосов
/ 01 марта 2010

Я следовал за Как сделать так, чтобы нижний колонтитул оставался внизу веб-страницы? публикация на stackoverflow ...

Но я не мог заставить его работать в веб-приложении asp.net .... Я использую главную страницу для всех страниц ...

Как заставить нижний колонтитул придерживаться нижней части страницы?

Для исх .: 

<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>

Ответы [ 3 ]

5 голосов
/ 01 марта 2010

Я предлагаю использовать div как 

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

тогда в вашем css поставь это 

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

или вы можете использовать библиотеку AjaxControlToolkit

Я также настоятельно рекомендую изменить макет с Table на div

2 голосов
/ 01 марта 2010

Я бы также порекомендовал структуру 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;
}
0 голосов
/ 13 ноября 2015

Мне понравилось ниже, лучше. Работает только с идентификатором, а не с классом. 

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