У меня есть две колонки рядом, которые разных цветов. Фон также имеет уникальный цвет. Правый столбец содержит текст, который будет расширяться до неизвестной высоты. Другой столбец содержит практически ничего.
<div id="container">
<div id="leftColumn">
<p>Only one small paragraph here</p>
</div>
<div id="rightColumn">
<p>Many large paragraphs inside here.</p>
</div>
</div>
Мне бы хотелось, чтобы левая колонка была точно такой же высоты, как правая колонка.
Вот CSS ...
#leftColumn {
display:inline-block;
width: 200px;
}
#rightColumn {
display:inline-block;
width: 600px;
vertical-align: top;
}
Поэтому, когда страница загружается, я использую jQuery для установки высоты левого столбца на основе высоты правого столбца.
$(document).ready(function() {
$('#leftColumn').css('height', $('#rightColumn').innerHeight());
});
Есть ли способ сделать это только с помощью CSS?