Как распределить динамические divs вертикально, равномерно?

В принципе, я хочу, чтобы дочерние div были равномерно распределены в родительском div, и если один из дочерних divs удален, остальные должны изменить размер и снова заполнить оставшееся пространство.

Пример:

 ---parent---------------
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
 ------------------------

теперь, когда дочерний div удаляется, он должен стать

 ---parent---------------
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
 ------------------------

Теперь я хочу сделать это только с чистым html/css, но на данный момент я не могу найти решение.

Две другие альтернативы, которые я рассматриваю, заключаются в следующем:

вычислить высоты с помощью javascript
создать разные классы для кучи сценариев (например: родитель с 2 дочерних div, 3 дочерних div, 4 дочерних div и т.д.), А затем загружать их соответственно с php

Кто-нибудь получил лучшую идею?

Ответ 1

Используйте таблицы css с table-layout: fixed - не требуется javascript.

FIDDLE

Чтобы увидеть этот рабочий щелчок "проверять элемент" на одном из элементов li вышеприведенного скрипта, щелкните правой кнопкой мыши "удалить node" и walla! - именно то, что вам нужно.

Разметка

<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;
}

Ответ 2

Я использовал свойства display:table и display:table-row.

Вот скрипка.

Ответ 3

Если кто-то хочет использовать CSS3, макет flexbox также является хорошим решением!

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

Обновлена ссылка JSFiddle