粘页脚不上需要滚动

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

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

任何人都可以给我一个关于最新情况和任何解决办法的问题？

来源

2012-08-09 Andre C

这是不好的做法，用在页脚表。表格应该用于数据表示。 – Sato 2012-08-09 11:25:20

对不起，我还在学习。我只是觉得它给了我更多的控制我的布局... – 2012-08-09 11:29:22

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

来源

2012-08-09 11:15:50 Andy

通过这样做，页脚只是直接上升到我的内容的底部... – 2012-08-09 11:23:31

你需要给作为一个工作链接，可以你上传你的网站的地方？ – Andy 2012-08-09 11:24:49

此外，页脚并不总是停留在底部。如果我滚动页面，页脚将同样滚动... – 2012-08-09 11:25:43

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

来源

2015-05-14 12:20:25

粘页脚不上需要滚动

回答

相关问题