Липкий нижний колонтитул накладывает текст на страницы, требующие прокрутки

У меня есть липкий нижний колонтитул со следующим 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>

Но по какой-то причине, когда на моей странице содержимого (это моя главная страница) текст длиннее, чем высота страницы, нижний колонтитул остается на своем месте и не перемещается под основной частью текста.

Кто-нибудь может подсказать мне, что происходит и как это исправить?

Источник

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;
}
Источник

Это потому, что вы используете position: absolute а также bottom: 0 чтобы нижний колонтитул всегда был внизу экрана, несмотря ни на что. Если вы хотите, чтобы он шел после контента, set position: relative

Источник
Другие вопросы по тегам