首页 文章

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

提问于
浏览 次
2

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>

<tr>
<td>
<a href="#"><asp:Label ID="Label2" runat="server" Text='<%#Eval("Message")%>'/></a></td>
    </tr>

<tr>
<td><asp:Label ID="Label3" runat="server" Text='<%#Eval("Time")%>'/></td>
    </tr>
    

    <hr style="color:darkgray;"/>
    </ItemTemplate>
    </asp:Repeater>
</div>
<div id="notificationFooter"><a href="#">See All</a></div> //Notification Footer
</div>
css asp.net html5

2 回答

  • 3

    你也必须这样做

    bottom:0; //whatever you want to add
    回复于
  • 0
    #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”

    回复于

相关问题