个人中心
gpt4 book ai didi

asp.net - ASP.NET 页面中的 CSS 粘性页脚

转载 作者：行者123 更新时间：2023-11-28 18:55:09 24 4
gpt4 key购买 nike

我过去在静态页面上使用过粘性页脚 CSS 技术，没有出现任何问题。然而，我现在正在设计我的第一个大型 ASP 元素，但我终其一生都无法让它工作。

我正在关注 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>
&nbsp;
<asp:Button ID="Button1" runat="server" Text="Filter" BorderColor="#FDE801" Width="56px" />
&nbsp;<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&#39;s End, UK">Land&#39;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(&#39;GridView1&#39;,&#39;Sort$prevride_organiser&#39;)">Organiser</a>
</th>
<th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$prevride_location&#39;)">Location</a>
</th>
<th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$prevride_date&#39;)">Ride Date</a>
</th>
<th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$prevride_rating&#39;)">Rating</a>
</th>
<th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$prevride_shortdesc&#39;)">Info</a>
</th>
<th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
</tr>
<tr>
<td>Paul Goring</td><td>Alps, France</td><td>24/10/2009</td>
<td>&nbsp;</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&#39;s End, UK</td>
<td>25/05/2011</td><td>&nbsp;</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>&nbsp;</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>&nbsp;</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">
&copy CycleCal.com 2011 | Design <a href="http://www.garethroulston.co.uk">www.garethroulston.co.uk</a>
</div><!--end of footer div-->

</body>
</html>

最佳答案

您需要此页脚出现在所有页面上吗？查看使用母版页并将页脚放在主模板中

关于asp.net - ASP.NET 页面中的 CSS 粘性页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8159356/

24 4 0
文章推荐： Python:动态导入模块内容
文章推荐： javascript - 将 PHP 数组传递给 JavaScript 时出现问题
文章推荐： python - 将文件打开到数组中，搜索字符串并返回值
文章推荐： ios - NSURLSession 是否自动对 URL 的文本进行 URL 编码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com