Уравнивание высоты блоков: Javascript и HTML

Сегодня мы с вами сделаем простую, но интересную фишку - уравняем высоту двух (можно более) независимых html-блоков.

Итак, пусть у нас есть два блока:

<style type="text/css">
   #block-one, #block-two {
      width: 300px;
      border: 1px solid #999;
      padding: 5px;
   }
   #block-one { float: left; }
   #block-two { float: right; }
</style>
<div id="block-one">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="block-two">
   Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
   et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
   dolore te feugait nulla facilisi.
</div>

Выглядеть это будет примерно так:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Допустим нам нужно сделать эти блоки с равной высотой (как-будто это ячейки одной строки одной таблицы). Для этого нам необходимо:

  1. Назначить на onload body функцию.
  2. В этой функции узнать максимальную высоту среди этих двух блоков
  3. Присвоить эту высоту всем блокам

Скрипт, выполняющий эти задачи, представлен ниже:

<script type="text/javascript">
var oldHandler = window['onload']; // сохраняем старый onload (если есть)
window['onload'] = function() {
   if(typeof(oldHandler) == 'function') {
      oldHandler();
   }
   setHeight(); // наша функция
};
function setHeight() {
   var b1 = document.getElementById('block-one');
   var b2 = document.getElementById('block-two');
   if (!b1 || !b2) return;
   var h1 = b1.offsetHeight;
   var h2 = b2.offsetHeight;
   if (h1 > h2) {
      b2.style.height = (h1 - 10) + 'px';
      b1.style.height = (h1 - 10) + 'px';
   }else if (h1 < h2) {
      b1.style.height = (h2 - 10) + 'px';
      b2.style.height = (h2 - 10) + 'px';
   }
}
</script>

Здесь перед присваиванием высоты отнимаются паддинги (-10), так как они входят в offsetHeight. Теперь, если применить этот javascript-код к нашим блокам, получим:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Вот и все. Это решение будет работать во всех браузерах. Стоит отметить, что количество блоков ничем неограничено - можно сделать хоть 10 независимых блоков одинаковой высоты. В приложении к заметке находится html-файлик с собранным кодом.

Примечание: При определении высоты использовать следует именно offsetHeight, а не innerHeight и уж тем более не clientHeight.

Файлы: 

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки