CODEWITHSUNDEEP
jqueryhtmlcss
user2877296
user2877296

Reputation:

css height:100%; a div halfway down the page

So I currently have:

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

All the <li> elements have a property border-right:1px solid black and I want li#last to be an empty <li> element that will go all the way to the bottom of the page so the border-right doesn't suddenly stop.

Visual example:

enter image description here

On the left is what I'm currently getting, on the right is what I want to achieve. Notice the last <li> element still pushes the border-right all the way to the bottom.

Upvotes: 0

Views: 606

Answers (1)

bjb568
bjb568

Reputation: 11498

You can give the <ul> border instead of the <li>s. Just extend it's (and it's parents) height to 100% to it stretches down the whole page.

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/

Upvotes: 2

Related Questions