ASP.NET中的CSS粘页脚页面
问题描述：
我以前在静态页面上使用粘页脚CSS技术时没有问题。但是，我现在正在设计我的第一个大型ASP项目，并且在我的生活中，我无法实现它。ASP.NET中的CSS粘页脚页面
我跟随these instructions (How to Use the Sticky Footer Code)并将<form>元素添加到html, body, form, #wrap {height: 100%;}声明中。我也玩过所有&之外的div#main和div#wrapper之间的表单元素（我认为）都无济于事。
注意：我的控件只包含页眉和页脚div。
任何帮助巨大的赞赏！
这里的CSS：
* {
margin: 0;
padding: 0;
font-family: Calibri, Arial, Sans-Serif;
}
body {
background-color: #646362;
color: white;
}
/* centre all content on page */
div#wrap {
width: 900px;
margin-left:auto;
margin-right:auto;
}
/*link styling*/
a:link {
color: white;
}
a:visited {color: white;
}
a:link.SortText
{
color:#fde801;
text-decoration: none;
}
a:visited.SortText
{
color:#fde801;
}
/*remove filter text style*/
a:link.RemoveFilterText
{
color: white;
font-size:small;
font-style:italic;
}
th a:link, td a:link, td a:visited
{
color: #fde801;
}
/*Remove borders from link images*/
a img
{
border: none;
}
img#rss_icon
{
margin: 3px 0px 2px 10px;
}
/*ridelist sort text style*/
.SortText
{
color: #fde801;
font-size:small;
font-style:italic;
}
/*table styles*/
table {
width: 900px;
border-collapse: collapse;
}
th
{
color: White;
border: none;
text-align: center;
padding-bottom: 20px;
}
table
{
border: none;
}
td
{
padding: 2px;
color: White;
/*height: 1.5em;*/
text-align: center;
vertical-align: middle;
border: none;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
/*Details View Table Styling
******
******
******
*/
/*details view image margin to account for no column header title*/
table#DetailsView1 img
{
margin-left: -73px;
}
table#DetailsView1 td
{
vertical-align:top;
}
#footer
{
color: #fde801;
/*margin-top: 2em;
margin-bottom: 0.5em;*/
text-align: center;
/*font-size: small;*/
}
/*CSS Sticky footer - to make footer always stay at bottom of page*/
html, body, form, #wrap {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 50px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -50px; /* negative value of footer height */
height: 50px;
clear:both;}'
而ASP：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ridelist2.aspx.vb" Inherits="ridelist2" %>
<%@ Register src="webcontrols/WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<%@ Register src="webcontrols/footer.ascx" tagname="footer" tagprefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
<title>Ride List</title>
</head>
<body>
<div id="wrap">
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
<div id="main">
<form id="form1" runat="server">
Filter by location:
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="detachedSQL" appendDataBoundItems="true" DataTextField="prevride_location" DataValueField="prevride_location">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Filter" BorderColor="#FDE801" Width="56px" />
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="RemoveFilterText"
NavigateUrl="~/ridelist2.aspx">Remove filter</asp:HyperLink>
<br />
<br />
<span class="SortText">Sort by clicking column headers.</span><br />
<br />
<asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="prevride_id"
DataSourceID="detachedSQL">
<Columns>
<asp:BoundField DataField="prevride_organiser" HeaderText="Organiser"
SortExpression="prevride_organiser" />
<asp:BoundField DataField="prevride_location" HeaderText="Location"
SortExpression="prevride_location" />
<asp:BoundField DataField="prevride_date" HeaderText="Ride Date"
SortExpression="prevride_date" DataFormatString="{0:d}" />
<asp:BoundField DataField="prevride_rating" HeaderText="Rating"
SortExpression="prevride_rating" />
<asp:BoundField DataField="prevride_shortdesc" HeaderText="Info"
SortExpression="prevride_shortdesc" />
<asp:ImageField DataImageUrlField="prevride_thumb">
</asp:ImageField>
<asp:HyperLinkField DataNavigateUrlFields="prevride_id"
DataNavigateUrlFormatString="details2.aspx?prevride_id={0}"
Text="View Details" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="detachedSQL" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [prevrides]"></asp:SqlDataSource>
</form>
</div><!--end of main div-->
</div><!--end of wrap div-->
<uc2:footer ID="footer1" runat="server" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="Stylesheet" type="text/css" href="StyleSheet.css" /><title>
Ride List
</title>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="rss.aspx">
<img id="rss_icon" alt="View RSS Feed"
src="images/icon_rss_thumb.png" /></a><br />
<img alt="Welcome to CycleCal.com" src="images/header.png"
style="width: 900px; height: 200px" id="headerimg" />
</div>
<!--end header div-->
<div id="main">
<form name="form1" method="post" action="ridelist2.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="WiWl34pHxgCmqiLpYahu/7UAl7edZL6TDL9k8z3ENNIdWy2/jssr6L1SByjjIavDwwKhohUyLoLJ0MY+7rNya1FMD8xOhMSgslh6VhMms9cEgZZ4MPXugMPK+05adLG8VKc59sboTVh2dEUzanRWf8GRdbzcYHCFSRjpGO3264nZrBjwliKC9OR+9qzwkqnt2bUfOCs0+qwMnmUQXEQn8xeSf8YcR+BA3mOZ/ajineh2EQNaXwoiJUTEOdOeSYomwR9nOFQlrK1KuLx/E9ftQtOkRAoBDBxWYHKM//kHVxJRUKimsPTa8e4li/V/3IsbYRHJw0RJZ+s1fubW5q1Cqw0TNjTkh/sBSP8fbpx7uMXxsem1hGeHglprcwcE3vAetW/OdKnWKsg/OJtNGll3VrDP7CCKrWPpCo281yjvodl2kbABol8g+V5aX/uqcruFZi9dwR+Yj4mvi9cwFh3Rwtnuga/I6x2exk0W8AvsW6c59POBPrCncpKUniRzMbgb/mqd7kEYEIxvtrxs8cjTfgWOwXcKkQ0hV7rqffYrF8/NrBDCz4fKU2kjgD9Skdutxf1Zu8fuefUD/ATgA4D918mQqWoCAjOkskdQ+mrzeECcGtFQYv+U3MLPPjuvTvgYk4L41R2B7vJ4LyMzhyHeub35j+ZgfFNwUb9DsAm77AazbrVwhrff+vLpILEW3BHX3spWEFW74APOIuYLWNuDJeqPEDVhVyL45nk/bvgMG3xAa1/G2CXeu6vM2SjPrZCqcWSYWxh2ZD7Ej06wscGin/sVFuCiossnU9WKmdWNptnwcdwHkpmsZseDDSuL2Aioxq3FYXdcH7NM4IZjFGyXJ5y1KOOvkYhMvAnpTHz0AspPpmpDZRhNcXxCS2v/5DVQi60+j2BWlgRtey6ZJ+z5+mNYa1lKX4AUFaF/ABZp9LuKO/bojPR6udx1yJGevMyP53j6zfV5JpYTlADlp6aOJHqNuqzimBBmgi7ThHKyWxij8lgvdO9sldgJrILfnfutdCs+I4mE0/RScHxLrfJl3aKeXP6r2a1ThkKxlHOPgKNOJG81tFRH7XwyjAbgHvu24so8G42lk9Lx4RoHwY9r5l5zPUMgZAO7X1V7dAOXQn2H/CZi9qNzX23+IiOxBnd8sNNXWawIm0nDEsh3eyRS0Wqr9i7r0vrU5GdbwaRZh099UAYXtaum4Ph63epVF0zUjZzCUK5EjCn+cyEdstlf/TAFg+0FCaVT78GM3wUAqjV1sL2kNwOCdemfQyIIRhaXgdns2UjL5X6+QPD94nR0vl+B/DU43HKeP2zOb4isj9gocr53hV2GtR1Obp1jy0eCXzwUMIsHPcFh+57gROoRHQmtdUxRGTR25gSXuT/2RxplzDokz5JpViebFvUOZEUmiRW0TcZp7TcVQaS4cM/AyXJVd/v76W2FY+Uu97hwjyvDWy02iWBzBknDpd6hcyfCc0HiRNBdx6UYxCbzuSQYcvR0uObdcfTuDiTKPzTOjWYsOCxlNwmA5aLq1X2IEkmyr2XicPW0vSneKM/9A9DQSiwiOAAXgaOxNPzAcS+57Ihy0NrqA3g8Rh0r6eqNGm4XXr++c+9qCRjx7kMShQ/ljCIgwhUN3Olwg88d/L9bspt00ubJWKd+oArfKwmiJm4Qjff6IlVlJaiRScA+Qz+Gzm5rQbV7nS2wnOCZr/rbNCVOFeNf16Yl9oSaW8 mSW5qkA1mWcLJ1JSr37WzmwsS2sE7w/thtDhfrcW9zudUjBVeo8Tha8q3JZGFl7f5sreLaspHC4THlH45VWJ6Oc7BpR eJuRHSXtYdnWfywufoatqo=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="fqkvl0aS2shRg5ls6E0+sLArVuW5gD24KKAtqJQctUm8/fB4bHh6/GFebvtfoKFz0YKS4urB+2A4XW8zX8hfDa/B4I7r2LFpMmyYVA/XSMXhSm5eFj/gknffPX145m6u2kPwfYkxReXgwSsM9xi/X3+mbQy02f1fyiLjrFekNgHbeCcCCBEUUSf8VpXnwOIS" />
</div>
Filter by location:
<select name="DropDownList1" id="DropDownList1">
<option value="Alps, France">Alps, France</option>
<option value="Land's End, UK">Land's End, UK</option>
<option value="Monmouth, UK">Monmouth, UK</option>
<option value="Bristol, UK">Bristol, UK</option>
</select>
取下过滤
排序通过单击列标题。
<div>
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$prevride_organiser')">Organiser</a>
</th>
<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$prevride_location')">Location</a>
</th>
<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$prevride_date')">Ride Date</a>
</th>
<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$prevride_rating')">Rating</a>
</th>
<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$prevride_shortdesc')">Info</a>
</th>
<th scope="col"> </th><th scope="col"> </th>
</tr>
<tr>
<td>Paul Goring</td><td>Alps, France</td><td>24/10/2009</td>
<td> </td><td>Passportes du Soleil event</td><td><img src="images/alps1s.jpg" style="border-width:0px;" /></td><td><a href="details2.aspx?prevride_id=1">View Details</a>
</td>
</tr>
<tr>
<td>Gareth Roulston</td><td>Land's End, UK</td>
<td>25/05/2011</td><td> </td><td>Start of our LEJOG</td><td><img src="images/landsend1s.jpg" style="border-width:0px;" /></td><td><a href="details2.aspx?prevride_id=2">View Details</a></td>
</tr>
<tr>
<td>John Whittle</td><td>Monmouth, UK</td><td>28/05/2011</td>
<td> </td><td>Day 3 of our LEJOG - all welcome to join us.</td><td><img src="images/monmouth1s.jpg" style="border-width:0px;" /></td><td><a href="details2.aspx?prevride_id=3">View Details</a></td>
</tr>
<tr>
<td>Jordan Lambert</td><td>Bristol, UK</td><td>27/05/2011</td>
<td> </td>
<td>Cornwall to Malpas, overnight in Bristol</td><td><img src="images/severnbridge1s.jpg" style="border-width:0px;" /></td><td><a href="details2.aspx?prevride_id=4">View Details</a></td>
</tr>
</table>
</div>
</form>
</div><!--end of main div-->
</div><!--end of wrap div-->
<!--footer section-->
<div id="footer">
© CycleCal.com 2011 | Design <a href="http://www.garethroulston.co.uk">www.garethroulston.co.uk</a>
</div><!--end of footer div-->
</body>
</html>
答
你需要这个页脚出现在所有网页？看看使用母版页并将页脚放在主模板中
+0
但是，我仍然坚持一个远离屏幕底部悬停的页脚，当浏览器窗口调整为小于GridView时，它也与我的GridView重叠。 – gazrolo4
+0
你的页脚是否有某种颜色 - 背景是。一个选项，如果你不能让它坐在底部冲洗是让你背景颜色与你的页脚相同，然后你的内容区域变白。这样，如果你的页脚不坐在底部，这不会有什么关系 –
+1
这似乎并不是试图回答这个问题;可以完成粘脚，而不需要将其伪装成它。使用母版页可能是一个好主意，但并不真正相关。 –
很难说不看到呈现的HTML。您是否证实了ASP页面生成的标记符合您的期望？具体来说，你的页脚div有正确的ID？如果您的页脚div标签具有runat =“server”标签，ASP.NET将生成该标识。您还可以使用Web浏览器中的开发人员工具来检查HTML元素并查看正在应用到页脚div的样式。 – KOTJMF
嗨，我已经将我的HTML输出添加到问题中......我看不到任何问题，但我必须在某处丢失某些东西？ – gazrolo4