如何做最后 <li> 坚持父母的页脚 <ul> 特定高度？

Question

我一直在尝试将最后一个li固定在具有特定高度的父ul的底部。 但是，当我尝试滚动零件时，最后一个元素也会开始移动。

    ul {
    list-style-type:none;
    height:150px;
    position:relative;
    }
    li:last-child {
    position: absolute;
    bottom:0px;
    background-color: white;}

我为此创建了一个演示：JSFIDDLE： http : //jsfiddle.net/zrVPJ/2/

Answer 1

通过编辑CSS尝试这一步骤。

li:last-child {
 background-color: #FFFFFF;
 bottom: 0;
 height: 22px;
 position: fixed;
 top: 127px;
}

JSFIDDLE

Answer 2

想通了，我会进一步澄清。

position:fixed和position:absolute之间有两个主要区别；

绝对将获取您的document属性，而固定将获取您的window属性。

如果您需要将某些东西留在某处，则可以使用侧边栏， fixed单元格，使用fixed 。

如果您需要在DOM周围专门放置一些东西，请使用absolute 。

有一些使用absolute的技巧。 一个是相对的 ，一个是静态的 。 通过在ul上使用static ，然后对last-child进行分类以反映这一点，您可以将ul保留在原位，但是最终单元格的绝对位置与其父级属性背道而驰。

阅读更多：

http://www.w3schools.com/css/css_positioning.asp