CSS position：fixed适用于页眉，但不适用于页脚

Question

的CSS

    

    #notificationContainer {
    背景颜色：#fff;
    边框：1像素实心rgba（100，100，100，.4）;
    -webkit-box-shadow：0 3px 8px rgba（0，0，0，.25）;
    溢出-y：自动;
    位置：绝对；
    顶部：30px；
    左边距：-170px;
    宽度：400px；
    高度：400px;
    z-index：9999999；
    显示：无；
    }
    #notificationContainer：之前{
    内容：”;
    显示：块；
    位置：绝对；
    宽度：0;
    高度：0；
    颜色：透明；
    边框：10px纯黑色；
    边框颜色：透明透明白色；
    上边距：-20px;
    左边距：188px;
    }
    #notificationTitle {
    z索引：1000；
    font-weight：粗体;
    填充：8px;
    font-size：13px;
    背景颜色：#ffffff;
    宽度：384像素；
    border-bottom：1px实心#dddddd;
    text-align：left;
    位置：固定 //位置固定为标题工作
    }
    #notificationsBody {
    填充：33px 0px 0px 0px！重要;
    最低高度：300像素；
    }
    #notificationFooter {
    背景颜色：＃e9eaed;
    文本对齐：居中；
    font-weight：粗体;
    填充：8px;
    font-size：12px;
    宽度：384像素；
    border-top：1px实心#dddddd;
    位置：固定 //位置固定不起作用

}

的HTML

<div id="notificationContainer">
<div id="notificationTitle">Notifications</div> //Notification Header
<div id="notificationsBody">
    <asp:Repeater ID="Repeater1" runat="server">        
<ItemTemplate > 
<tr>
<td><asp:Label ID="Label1" runat="server" Text='<%#Eval("HeaderMessage")%>'/></td>
    </tr><br />
<tr>
<td>
<a href="#"><asp:Label ID="Label2" runat="server" Text='<%#Eval("Message")%>'/></a></td>
    </tr><br />
<tr>
<td><asp:Label ID="Label3" runat="server" Text='<%#Eval("Time")%>'/></td>
    </tr>
    <br />
    <hr style="color:darkgray;"/>
    </ItemTemplate>
    </asp:Repeater>
</div>
<div id="notificationFooter"><a href="#">See All</a></div> //Notification Footer
</div>

Answer 1

#notificationFooter {
   background-color: #e9eaed;
   text-align: center;
   font-weight: bold;
   padding: 8px;
   font-size: 12px;
   width: 384px;
   border-top: 1px solid #dddddd;
   position:fixed;
   bottom: 0px;
} 

添加“底部：0px”，将元素以固定的位置拉到页面底部。:)注意：左侧，右侧和顶部也可以分配一个像素值！例如“ top：5px”