jquery - CSS 高度 :100%; a div halfway down the page

Question

所以我现在有:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li id="last"></li>
    </ul>
</div>

所有 <li>元素有一个属性 border-right:1px solid black我想要 li#last是一个空的 <li>将一直到页面底部的元素，因此 border-right不会突然停止。

视觉示例:

左边是我目前得到的，右边是我想要实现的。注意最后一个 <li>元素仍然插入 border-right一直到底部。

Answer 1

你可以给<ul>边框而不是 <li>秒。只需将它(和它的 parent )的高度扩展到 100%它延伸到整个页面。

html, body, ul {
    height: 100%; /* Full height */
    margin: 0; /* No margins to interfere */
}
ul {
    list-style-type: none; /* No bullets */
    background: #f00; /* A background, to see it */
    padding: 0; /* No padding */
    display: table; /* Shrinkwrap */
    border-right: 1px solid black; /* And the border */
}

http://jsfiddle.net/LfsLv/