Вычислить высоту строки в CSS-сетке с помощью JavaScript

Question

Я создал небольшую структуру сетки CSS для своего нового проекта, но вскоре понял, что у нее есть некоторые недостатки. Проблема в том, что столбцы не занимают целую высоту строки, что в свою очередь мешает мне создавать «блочный» макет и с текущей настройкой я не могу этого добиться с помощью CSS.

Я решил это с помощью JavaScript, но меня беспокоит то, что этот мир кода должен быть выполнен после загрузки страницы. Это означает, что макет будет немного грязным, если загружается много контента.

Кроме того, я не очень разбираюсь в JavaScript, поэтому не уверен, правильно ли я сделал это.

Вот ссылка на исходный код на CodePen

[Примечание] Я не хочу использовать какие-либо библиотеки JavaScript

Answer 1

Вы можете попробовать использовать CSS table отображения стека свойства и использование JavaScript в качестве запасного варианта к неподдерживаемым браузерам, если это необходимо.

display: table; 
    display: table-cell; 
    display: table-column; 
    display: table-colgroup; 
    display: table-header-group; 
    display: table-row-group; 
    display: table-footer-group; 
    display: table-row; 
    display: table-caption; 

http://codepen.io/anon/pen/LEniv

Browser compatibility

Answer 2

http://jsfiddle.net/cDZpA/

.container { 
    position: relative; 
    font-size: 0px; 
    overflow: hidden; 
} 
.col { 
    display: inline-block; 
    width: 33.333%; 
    font-size: 14px; 
    vertical-align: top; 
    height: 100%; 
    position: relative; 
    margin-bottom: -10000px; 
    padding-bottom: 10000px; 
} 

.c1 { background: yellow; } 
.c2 { background: purple; } 
.c3 { background: red; } 

Не спрашивайте меня, как, но это код, который я положил работы.

Вот ваш CodePen исправлено: http://codepen.io/anon/pen/wkbrj