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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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');
}
Share and Enjoy:
  • Print this article!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • TwitThis

Leave a Reply