Главная » Интернет и IT » Как сделать блоки div одинаковой зависимой высоты

Как сделать блоки div одинаковой зависимой высоты

Раньше, когда сайты верстались с помощью таблиц, создать колонки одинаковой высоты было проще простого, но теперь табличная верстка - это уже прошлый век. В этой статье мы предлагаем вам узнать, как создать колонки (div) одинаковой высоты, зависящей от их содержимого.

Итак, начнем. Для достижения этой цели мы будем использовать не только CSS, но и JavaScript, а именно библиотеку jQuery. Принцип работы - изменение высоты блоков относительно блока с максимальной высотой. А теперь переходим к кодингу.

Для начала подключаем библиотеку jQuery и пишем непосредственно сам JS-код. А брать мы библиотеку будем у Google, что существенно увеличит загрузку сайта (об этом в сети есть много информации). Этот код необходимо вставить между тегами <head> и </head>.

HTML код:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});
</script>

А это сами колонки, их ставим в необходимое вам место.

HTML код:
<div class="container">
<div class="left-block">Левый сайдбар</div>
<div class="content">Контент</div>
<div class="right-block">Правый сайдбар</div>
</div>

А теперь переходим к оформлению - стилизации наших блоков.

CSS:
.container {
width: 900px;
margin: 0 auto;
}
.left-block {
float: left;
width: 25%;
}
.content {
float: left;
width: 50%;
}
.right-block {
float: left;
width: 25%;
}

Вот собственно и все, можете радоваться результату! Главным плюсом этого решения является то, что оно кроссбраузерное, так что даже на старом ослике все будет отлично работать =). Единственный недостаток: при отключенном JavaScript высота будет подстраиваться под контент блоков. К счастью, все меньше и меньше пользователей серфят без JS.

А если вы часто работаете с MS Excell, то рекомендую прочитать про считывание данных из excel в php.

Всего комментариев: 5

  • Желаемого эффекта не получила, так как между колонками у меня должен быть отступ. А так, как Вы предлагаете, проще весь блок залить одним цветом. Извините, если неправильно поняла.

  • Если бы вы показали пример, мог бы прокомментировать

  • Достаточно обернуть два блока, которые нужно выстраивать в одинаковой высоте, в блок с классом .container и уже все будет работать.
    Спасибо, отличное решение!

  • Спасибо! Способ отличный! Самое то что искал!

  • Данный способ уже староват. Проще будет все на css сделать, используя display: flex

Оставить комментарий

Подпишитесь на наш паблик в ВК

Рейтинг@Mail.ru