CSS位置:fixed适用于页眉，但不适用于页脚

Question

CSS

#notificationContainer {
  background-color: #fff;
  border: 1px solid rgba(100, 100, 100, .4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  overflow-y:auto;
  position:absolute;
  top: 30px;
  margin-left: -170px;
  width: 400px;
  height:400px;
  z-index: 9999999;
  display: none;
}
#notificationContainer:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  color: transparent;
  border: 10px solid black;
  border-color: transparent transparent white;
  margin-top: -20px;
  margin-left: 188px;
}
#notificationTitle {
  z-index: 1000;
  font-weight: bold;
  padding: 8px;
  font-size: 13px;
  background-color: #ffffff;
  width: 384px;
  border-bottom: 1px solid #dddddd;
  text-align:left;
  position:fixed;               //Position Fixed working for the header
}
#notificationsBody {
  padding: 33px 0px 0px 0px !important;
  min-height:300px;
}
#notificationFooter {
  background-color: #e9eaed;
  text-align: center;
  font-weight: bold;
  padding: 8px;
  font-size: 12px;
  width: 384px;
  border-top: 1px solid #dddddd;
  position:fixed; //Position Fixed Not Working
}

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;
} 

添加"bottom:0px"将固定位置的元素拉到页面底部。：）旁注：左，右&顶部也可以指定一个像素值！例如"top:5px"

Answer 2

你也必须这样

bottom:0; //whatever you want to add