如何坚持页脚底部的网页 [英] Ways to stick footer to the bottom a page
本文介绍了如何坚持页脚底部的网页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我跟着<一个href=\"http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page\">How你得到的页脚留在网页底部？张贴在计算器...
但我不能让它在一个asp.net web应用程序工作过....我使用的是母版页的所有网页...
我怎样才能让页脚粘到页面底部？
REF为：
＆LT;表格的宽度=100％的cellpadding =0CELLSPACING =0＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;表格的宽度=100％的cellpadding =0CELLSPACING =0级=bgpatt＆GT;
＆LT; TR风格=高度：25px的;＆GT;
＆LT; TD风格=WIDTH：40％＆GT;＆LT; / TD＆GT;
＆LT; TD风格=WIDTH：30％＆GT;＆LT; / TD＆GT;
＆LT; TD风格=宽度：30％; VALIGN =顶＆GT; ＆LT; DIV ID =headermenu的风格=宽度：300像素;＆GT;＆LT; UL风格=宽度：300像素;＆GT;
＆LT;立GT;＆LT;标题=家的href =＃类=headerhome＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT;标题=关于我们的href =＃类=公司简介＆gt;关于美国和LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT;标题=联系我们的href =＃类=联系我们＆GT;联系我们＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT;标题=反馈的href =＃类=反馈＆GT;反馈和LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT;标题=登出的href =＃类=注销＆GT;注销＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR风格=高度：25px的;＆GT;
＆所述; TD列跨度=3＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR风格=高度：25px的;＆GT;
＆所述; TD列跨度=3＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR = VALIGN顶＆GT;
＆所述; TD＆GT;
＆LT;表格的宽度=100％的cellpadding =0CELLSPACING =0＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;表格的宽度=100％的cellpadding =0CELLSPACING =0＆GT; ＆LT; TR风格=高度：5像素;背景颜色：＃404040;＆GT;
＆LT; TD合并单元格=3VALIGN =顶的风格=宽度：100％＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;表格的宽度=100％的cellpadding =0CELLSPACING =0＆GT;
＆所述; TR＆GT;
＆LT; TD风格=宽度：45％;＆GT; ＆LT; / TD＆GT;
＆LT; TD风格=宽度：45％;＆GT;
＆LT; DIV ID =头的风格=宽度：300像素;＆GT;＆LT; UL ID =MAINMENU=服务器＆GT;
＆LT;李ID =mainHome=服务器＆GT;＆LT; A HREF =＃称号=家级=家＆GT;＆LT;跨度＆GT;＆LT; / SPAN＆GT;首页＆LT; / A＆GT;＆LT ; /李＆GT;
＆LT;李ID =mainManage=服务器＆GT;＆LT; A HREF =Users.aspx称号=管理类=管理＆GT;＆LT;跨度＆GT;＆LT; / SPAN＆gt;管理＆LT; / A＆GT ;＆LT; /李＆GT;
＆LT;李ID =mainEnquiry=服务器＆GT;＆LT; A HREF =account.aspx称号=查询类=查询＆GT;＆LT;跨度＆GT;＆LT; / SPAN＆GT;查询及LT; / A＆GT ;＆LT; /李＆GT;
＆LT;李ID =mainReport=服务器＆GT;＆LT; A HREF =EnquiryReport.aspx称号=报告级=报告＆GT;＆LT;跨度＆GT;＆LT; / SPAN＆GT;报告＆LT; / A＆GT ;＆LT; /李＆GT; ＆LT; / UL＆GT;＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; TD风格=宽度：10％;＆GT; ＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;表格的cellpadding =0CELLSPACING =0WIDTH =100％＆GT;
＆LT; TR = VALIGN顶＆GT;
＆LT; TD风格=WIDTH：1px的;＆GT;＆LT; DIV的风格=WIDTH：1px的;高度：450像素;＆GT;＆LT; / DIV＆GT;＆LT; / TD＆GT;
＆LT; TD风格=WIDTH：95％＆GT;
＆LT; ASP：的ContentPlaceHolder ID =ContentPlaceHolder1=服务器＆GT; ＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT; / TD＆GT;
＆LT; TD风格=宽度：5％＆GT;
＆LT; ASP：的ContentPlaceHolder ID =ContentPlaceHolder2=服务器＆GT;
＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; DIV CLASS =包装＆GT;＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;表格的cellpadding =0CELLSPACING =0WIDTH =100％的风格=高度：25px的;＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;表格边框=0的cellpadding =0CELLSPACING =0WIDTH =100％的风格=高度：35px;顶：10px的;类=页脚＆GT; ＆所述; TR＆GT; ＆LT; TD风格=宽度：100％; ALIGN =中心＆GT;
＆LT; A HREF =＃类=页脚＆GT;家庭和LT; / A＆GT; | ＆LT; A HREF =＃类=页脚＆gt;关于美国和LT; / A＆GT; | ＆LT; A HREF =＃类=页脚＆GT;联系我们＆LT; / A＆GT; | ＆LT; A HREF =＃类=页脚＆GT;反馈和LT; / A＆GT; ＆LT; / TD＆GT; ＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD风格=宽度：100％; ALIGN =中心类=footer_text＆GT;
复制权Xavytechnologies ＆LT; / TD＆GT; ＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
解决方案
我也使用的是浮动推荐一个div结构。
标记
＆LT; DIV CLASS =bodyWrap＆GT;
＆LT; DIV CLASS =头＆GT;
＆LT;！ - 此处插入内容 - ＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =内容＆GT;
＆LT;！ - 此处插入内容 - ＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =页脚＆GT;
＆LT;！ - 此处插入内容 - ＆GT;
＆LT; / DIV＆GT;
＆LT; DIV的风格=明确：既＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
的CSS：
.bodyWrap
{
宽度：500像素;
}
.header，.content，.footer
{
宽度：100％;
浮动：左;
}
I followed the How do you get the footer to stay at the bottom of a Web page? post on stackoverflow...
But i couldn't make it too work in an asp.net web application.... I am using a master page for all pages...
How can i make footer stick to the bottom of the page?
For 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>
解决方案
I'm would also recommend a div structure using floating.
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;
}
这篇关于如何坚持页脚底部的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
