CODEWITHSUNDEEP
htmlcss
jnbdz
jnbdz

Reputation: 4403

List element item adjusting to ul height

Here is what I was able to accomplish: http://jsfiddle.net/mf2y745b/3/

The problem is the bottom item seems to have a higher space on top than the other ones. Why? And is there anything I can do to make sure that the space between items are always equal whatever the height of the ul element is, with the first item touching the top and the last element touching the bottom?

HTML:

<ul>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
</ul>

CSS:

ul {
    list-style: none;
    height: 800px;
    border: 1px solid red;
    display: table;
    position: relative;
    padding: 0;
    margin: 0;
}

ul li {
    display: table-row;
    margin: 0;
}

ul li:last-child {
    display: block;
    position: absolute;
    bottom: 0;
}

Update:

I just tried with CSS flex box. But yet again the first element does not touch the top, and the last element does not touch the bottom.

Here is the demo: http://jsfiddle.net/mf2y745b/9/

CSS:

ul {
    list-style: none;
    height: 800px;
    border: 1px solid red;
    display: table;
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    margin: 0;
    flex-flow: column;
    justify-content: space-around;
}

ul li {
    margin: 0;
}

ul li:last-child {
    display: block;
    bottom: 0;
    padding: 0;
}

By the way I rather find a solution that does not use Flexbox. This is just to show that I have tried it with Flexbox. And it just might be useful for someone.

Upvotes: 2

Views: 558

Answers (1)

George G
George G

Reputation: 7705

You don't need unnecessary css 'trick'.

This simple will work for you:

ul {
    list-style: none;
    border: 1px solid green;
    padding: 0;
    margin: 0;
}

ul li {
    /*
     * the gap you need between items
     */
    margin-bottom: 30px; 
}

ul li:last-child {
    margin-bottom: 0;
}

http://jsfiddle.net/mf2y745b/7/

Upvotes: 1

Related Questions