0

我有一个带有以下 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%">
                        &nbsp;</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>

但是由于某种原因，当在我的内容页面（这是我的母版页）上的文本长度超过页面高度时，页脚保持在其位置并且不会在文本正文下方移动。

任何人都可以告诉我发生了什么以及任何解决方法吗？

4

1 回答 1

0

这是因为您正在使用position: absoluteandbottom: 0告诉页脚始终位于屏幕底部，无论如何。如果你想让它在内容之后流动，set position: relative

于 2012-08-09T11:15:50.353 回答