Question

我有一个带有以下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>

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

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

Answer 1

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

Answer 2

使用以下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;
}

粘滞页脚会在需要滚动的页面上重叠文本

2 个答案: