css身高：100％;在页面中间的一个div

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> s。只需将它（和它的父母）的高度扩展到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/