Приведение HTML-блоков у общей высоте.

May 18, 2008 by Павел Антонов

Posted under: HTML

Для без-табличной верстки создание двух блоков одинаковой высоты представляет собой определенную проблему. Существует техника создания блоков равной высоты на чистом CSS (http://www.ejeliot.com/blog/61) , однако тут есть свои проблемы и ограничения.

Наткнулся в исходниках примеров http://www.xhtmlit.com/ на код выставляющий одинаковую высоту для блоков на JavaScript. Почему бы нет…

function $() {
	var elements = new Array();
	for (var i=0;i<arguments.length;i++) {
		var element = arguments[i];
		if (typeof element == 'string') element = document.getElementById(element);
		if (arguments.length == 1) return element;
		elements.push(element);
	}
	return elements;
}
 
var BoxHeights = {
	maxh: 0,
	boxes: Array(),
	num: 0,
	op_test: false,
	equalise: function() {
		this.num = arguments.length;
		for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
		this.boxes = arguments;
		this.maxheight();
		for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
	},
	maxheight: function() {
		var heights = new Array();
		for (var i=0;i<this.num;i++) {
			if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
				heights.push($(this.boxes[i]).scrollHeight);
			} else {
				heights.push($(this.boxes[i]).offsetHeight);
			}
		}
		heights.sort(this.sortNumeric);
		this.maxh = heights[this.num-1];
	},
	sortNumeric: function(f,s) {
		return f-s;
	}
}
 
window.onload = function() {
	BoxHeights.equalise('cLeft-two','cMiddle-two','cRight-two');
}