Задать блоку высоту через Java Script

Kaktotak · February 4, 2011

Доброго времени суток!

Есть n-ое кол-во блоков, ширина контента резина, все блоки заданной ширины, разной высоты(разное кол-во контента внутри), с позиционированием по левому краю (float:left;).

В результате блоки сортируются не очень хорошо, с некими дырами, хотелось бы создать алгоритм находим больший блок по высоте и остальным задаём его высоту, пробовал сам написать скрипт но что то не то:

var maxHeight = 0;
$$('.someclass').each(function(el){
	if(el.getStyle('height') > maxHeight) maxHeight = el.getStyle('height');
});
$$('.someclass').each(function(el){
	el.setStyle('height', maxHeight);
});

Подскажет может кто решение, или может натолкнёт.

Зы

Приношу извинения за оформления, первый пост на сим форуме.

Заранее спасибо)))

Edited February 4, 2011 by Kaktotak

psywalker · February 4, 2011

Нет проблем дружище, лови.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	#wrap {}
	#wrap div { float: left; width: 30%; margin: 0 1%; background: red;}
</style>
</head>

<body>
<div id="wrap">
<div class='div'>
	<p>	text text text text text text text text text text text text text text text text text text text text text text text text
	  text text text text text text text text text text text text text text text text text text text text text text text text
	   text text text text text text text text text text text text text text text text text text text text text text text text
		text text text text text text text text text text text text text text text text text text text text text text text text
		 text text text text text text text text text text text text text text text text text text text text text text text text
		  text text text text text text text text text text text text text text text text text text text text text text text text
		   text text text text text text text text text text text text text text text text text text text text
			text text text text text text text text text text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text text text text text text text text text text</p>

</div>
<div class='div' style="background: yellow;">
	<p>	text text text text text text text text text text text text text text text text text text text text text text text text
	  text text text text text text text text text text text text text text text text text text text text text text text text
	   text text text text text text text text text text text text text text text text text text text text text text text text
	   </p>
</div>
<div class='div' style="background: green;">
	<p>	text text text text text text text text text text text text text text text text text text text text text text text text
	  text text text text text text text text text text text text text text text text text text text text text text text text
	   text text text text text text text text text text text text text text text text text text text text text text text text
		text text text text text text text text text text text text text text text text t</p>
</div>
</div>
<script type="text/javascript">

	window.onresize = resize;
	window.onload = resize;
	function resize(){
		var div = document.getElementById('wrap').getElementsByTagName('div');
		var n = 0;

		for(var i=0;i<div.length;i++){
			if(div[i].className == 'div'){
				div[i].style.height = 'auto';
				if(div[i].offsetHeight>n) n = div[i].offsetHeight;
				div[i].style.height = n+'px';
			}
		}		
	}
</script>
</body>

</html>

Kaktotak · February 7, 2011

То что надо, благодарствую!!!

Edited February 7, 2011 by Kaktotak

Night Man · February 22, 2011

Доброго времени суток....

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

собственно генерировал код при помощи http://csstemplater.com/

ни как не могу понять как дотянуть блок Left Sidebar до футера..., при условии что футер прижат к нижнему краю экрана... (а значит его высота должна быть равна блоку wrapper которая 100%.)

Подскажите, как это реализовать...

psywalker · February 22, 2011

А ты не дотягивай. А просто сделай фон у главного контейнера левый.

Night Man · February 22, 2011

вот я начал делать таблицей...

но потом решил делать - правильно, (дивами)...

и совсем запутался...

расположение блоков должно быть такое...,

но в разных блоках думаю положить разные текстуры,

в правом блоке галереи,

в левом - меню....

еще не уверен... но наверное надо резиновый от 1255 - 1585 (а может в этом я и не прав...)

как то так...

а как иначе замостить разными текстурами если блок не дотянуть вниз - не пойму...

psywalker · February 22, 2011

Я же тебе говорю, сделай полоску фона слева у главного контейнера например и пусть она у тебя танется по оси Y

Night Man · February 22, 2011

я же полоской текстуру не замощу на обоих блоках...

если как на картинке,( с лева текстура, с права однородный фон) то можно полоску высотой с квадратик с текстурой и отрепитеть по Y, ( я уже тоже думал об этом),

но вот блин( втемяшилось в голову, что хочу текстуру на обеих картинках)

если конечно квадратики текстур одинаковой высоты подобрать и набрать в полосу...,(но помоему они у меня все разные...)

psywalker · February 22, 2011

( с лева текстура, с права однородный фон)

Вот именно. Левый фон на контейнер, а правый на body,html

Night Man · February 22, 2011

ок, попробую...

psywalker · February 22, 2011

ок, попробую...

Конечно же, давно пора

Night Man · February 22, 2011

завтра (тоесть днем)...

сейчас мозг уже не соображает-замерз уже совсем...

в квартире холодина - батареи еле теплые....

(юг - называется...)

Edited February 22, 2011 by Night Man

psywalker · February 22, 2011

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

Давай, накройся потеплее. А завтра праздник, так что не торопись особо.

Night Man · February 22, 2011

не поверишь, сижу перед мониторм в меховой плед укутаный (не помогает..)...,

а насчет праздника - покой нам только снится (еще на куче фотографий студентам лица от прыщей очищать...)....

усе.. ушел...

Всех с наступившим! (23 уже началось...)

Edited February 22, 2011 by Night Man

SurPaul · January 8, 2012

var maxHeight = 0;
$$('.someclass').each(function(el){
	if(el.getStyle('height') > maxHeight) maxHeight = el.getStyle('height');
});
$$('.someclass').each(function(el){
	el.setStyle('height', maxHeight);
});

а это вообще JS?? по-моему это PHP.

margo239 · February 6, 2012

:dash: Ваша скрипт позволяет увеличивать автоматически высоту второго и третьего блоков, если у первого блока высота больше (но не наоборот). А как сделать, чтобы в 2-х колонках высота была одинаковой, если во втором блоке она больше? Т.е. равнение должно быть на 2-ой блок, но в идеале, нужно чтобы независимо выделялась наибольшая высота, а наименьшая под нее подгонялась.

Заранее огромное вам спасибо.

Switch74 · February 6, 2012

<script type="text/javascript">
window.onresize = resize;
window.onload = resize;
function resize(){
var div = document.getElementById('wrap').getElementsByTagName('div');
var n = 0;
for(var i=0;i<div.length;i++){
if(div.className == 'div'){
div.style.height = 'auto';
if(div.offsetHeight>n) n = div.offsetHeight;
div.style.height = n+'px';
}
}
}
</script>

вот сижу и думаю, как этот скрипт отработает если первый блок имеет высоту 100, второй 200, третий 300, четвертый 200 и они расположены в два столбика? помоему высоту сменит только последний блок на 300

margo239 · February 6, 2012

<script type="text/javascript">
window.onresize = resize;
window.onload = resize;
function resize(){
var div = document.getElementById('wrap').getElementsByTagName('div');
var n = 0;
for(var i=0;i<div.length;i++){
if(div.className == 'div'){
div.style.height = 'auto';
if(div.offsetHeight>n) n = div.offsetHeight;
div.style.height = n+'px';
}
}
}
</script>
вот сижу и думаю, как этот скрипт отработает если первый блок имеет высоту 100, второй 200, третий 300, четвертый 200 и они расположены в два столбика? помоему высоту сменит только последний блок на 300

Почему-то опять равняется на 1-й блок, если он получается длиннее, то 2-блок выравнивается по нему. Если наоборот - не работает :blush:

Great Rash · February 6, 2012

Для чего вам это надо? Таблицу блоками эмулировать?

Switch74 · February 6, 2012

попробуй так


<script type="text/javascript">

        window.onresize = resize;
        window.onload = resize;
        function resize(){
                var div = document.getElementById('wrap').getElementsByTagName('div'
);
                var n = 0;

                for(var i=0;i<div.length;i++){
                        if(div[i].className == 'div'){
                                div[i].style.height = 'auto';
                                if(div[i].offsetHeight>n) n = div[i].offsetHeight;
                        }
                }
                for(var i=0;i<div.length;i++){
                        if(div[i].className == 'div'){
                                div[i].style.height = n+'px';
                        }
                }    
        }
</script>

margo239 · February 6, 2012

попробуй так


<script type="text/javascript">

        window.onresize = resize;
        window.onload = resize;
        function resize(){
                var div = document.getElementById('wrap').getElementsByTagName('div'
);
                var n = 0;

                for(var i=0;i<div.length;i++){
                        if(div[i].className == 'div'){
                                div[i].style.height = 'auto';
                                if(div[i].offsetHeight>n) n = div[i].offsetHeight;
                        }
                }
                for(var i=0;i<div.length;i++){
                        if(div[i].className == 'div'){
                                div[i].style.height = n+'px';
                        }
                }    
        }
</script>

Клево! Теперь получилось! Попробую прикрутить к своей страничке. Огромное спасибо! 'warp' и 'div' в кавычках, как я понимаю, пользовательские названия блоков (уж простите блондинку, я в скриптах не бум-бум, а уважаемый psywalker так в своем примере обозвал классы, что я теряюсь :rolleyes: )?

Спасибо!

Для чего вам это надо? Таблицу блоками эмулировать?

да, что-то вроде этого.

Great Rash · February 6, 2012

да, что-то вроде этого.

display: table-cell; не катит? Или вообще таблицей сделать? Глупо прикручивать скрипт для того, что можно сделать без скрипта.

Sign In

Задать блоку высоту через Java Script

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information