Кажется, я не могу понять это правильно. Я все время пытался найти решение, позволяющее иметь 3 встроенных блока, которые будут расти до самого высокого содержимого с вертикальными границами. Это границы, которые делают это таким трудным. Если бы мне не нужны были рамки, я был бы в порядке, но я не могу без них.
То, что у меня есть, работает, вроде... Если я изменяю размер окна браузера, а левый элемент самый высокий, все выглядит нормально; все границы равны 100%, а родительский элемент div растет вместе с содержимым внутри.
Однако, если центральный или правый div имеет самое высокое содержимое, вертикальные границы не достигают 100%. Я подумал, чтобы исправить это, я бы дал среднему и правому элементам высоту 100%. Это сводит границы к земле, когда я изменяю размер, но теперь родитель больше не растет с самым высоким элементом, и содержимое вытекает. пожалуйста, смотрите прикрепленный рисунок.
Может кто-нибудь, пожалуйста, помогите мне исправить это? Прямая трансляция на JSBin
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
float:left;
width:100%;
border-top:1px solid #000;
border-bottom:2px solid #000;
}
#wrapper .col {
float:left;
width:33%;
display:inline-block;
}
#wrapper .col:nth-child(1) {
border-right:2px solid #000;
}
#wrapper .col:nth-child(2) {
border-right:2px solid #000;
height:100%;
}
#wrapper .col div {
padding:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).on('load resize', function(){
var $div = $('#wrapper .col');
var max = 0;
$.each($div, function(){
if(parseInt($(this).outerHeight()) > max){
max = parseInt($(this).outerHeight())
$("#wrapper").css('height', max + 'px');
}
});
}).resize();
</script>
</head>
<body>
<div id="wrapper">
<div class="col">
1<br>
1<br>
1<br>
</div>
<div class="col">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div class="col">
1<br>
1<br>
</div>
</div>
</body>
</html>
Вот как это выглядит: 
ИЗМЕНИТЬ:
Я хотел бы добавить, что если у кого-то есть лучший способ добиться того, что я пытаюсь сделать, я очень открыт.
table-cell. Спасибо тебе за это. 14.03.2014display: table-cellна него, я забыл поставить вокруг негоdisplay: table! Дох. 14.03.2014display:tableвы должны следовать структуре фактической таблицы, поэтому следующей будетdisplay:table-rowи, наконец,display:table-cell. Но толькоtable, за которым следуетtable-cell, хорошо работает, когда у вас есть только 1 строка. 14.03.2014