我有一个带有以下CSS的粘性页脚:
<style type="text/css">
.HeaderTBL
{
width: 100%;
height: 35px;
min-width:960px;
max-width:100%;
background-color: #333333;
}
.FooterTBL
{
width: 100%;
min-width:960px;
max-width:100%;
position:inherit;
bottom:0;
}
.Footer
{
position:absolute;
height: 25px;
bottom:0;
width:100%;
}
</style>
我的代码如下:
<body style="margin: 0;">
<form id="form1" runat="server">
<asp:ScriptManager ID="MasterSM" runat="server">
</asp:ScriptManager>
<table class="HeaderTBL">
<tr>
<td width="75%">
</td>
<td width="25%" align="right">
<asp:TextBox ID="SearchTB" runat="server"
ToolTip="Search"
Width="216px" Height="25px" ForeColor="#333333" BorderColor="White"
BorderStyle="None" Font-Names="Candara" Font-Overline="False"
Font-Size="Medium"></asp:TextBox>
<asp:RoundedCornersExtender ID="SearchTBRCE" runat="server" Enabled="True"
TargetControlID="SearchTB" BorderColor="White">
</asp:RoundedCornersExtender>
</td>
</tr>
</table>
<table align="center" width="960px" style="min-height:100%;">
<tr>
<td width="150px" align="center" valign="top">
<asp:Image ID="LogoIMG" runat="server" Height="150px" ImageAlign="Left"
ImageUrl="~/Images/Logo.gif" Width="150px" />
</td>
<td width="810px" rowspan="2" align="center" valign="top">
<asp:ContentPlaceHolder ID="Body" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td width="150px" align="center" valign="top">
<asp:Label ID="LoginLBL" runat="server" Text="Login"></asp:Label>
</td>
</tr>
</table>
<div class="Footer">
<table class="FooterTBL" style="bottom: 100%">
<tr>
<td align="center"
style="font-family: Candara; font-size: medium; border-top-style: solid; border-top-width: medium; border-top-color: #333333; color: #333333;">
Test Text</td>
</tr>
</table>
</div>
</form>
</body>
但出于某种原因,当我的内容页面(这是我的母版页)时,我的文字长度超过了页面的高度,页脚停留在其位置,并且不会移动到文本正文的下方。
任何人都可以告诉我发生什么事情以及任何解决方法吗?
答案 0 :(得分:0)
这是因为您使用position: absolute
和bottom: 0
告诉页脚始终位于屏幕底部,无论如何。如果您想让它在内容之后流动,set position: relative
答案 1 :(得分:0)
使用以下css 我参考了https://css-tricks.com/snippets/css/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}