How to spread dynamic divs vertically, evenly?

I have used display:table and display:table-row properties.

Here is the fiddle.

Use css tables with table-layout: fixed - no javascript is necessary.

FIDDLE

To see this working click 'inspect element' on one of the li elements of the above fiddle, then right-click 'delete node' and walla! - exactly what you need.

Markup

<ul>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
</ul>

CSS

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-row;
    background: pink;
}
span
{
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid green;
}

If anyone is willing to use CSS3, then flexbox layout is also a good solution!

.parent{
  height:200px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.child{
  width:100%;
  height:100%;
}

Updated JSFiddle Link