Javascript-форум - Изменение высоты div

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Изменение высоты div (https://javascript.ru/forum/misc/8739-izmenenie-vysoty-div.html)

TAILER

10.04.2010 19:27

Изменение высоты div

Смотрел поиск, искал в гугле, но ответа на свой вопрос не нашел.
Думаю может здесь найду ответ...

Нужно изменить высоту adr4, которая должна быть равна - высота adr1 + высота adr2 + высота adr3.

Вообще не силен в javascript, поэтому даже совсем простой пример решить не могу :cray:

Aetae

10.04.2010 20:15

ширина adr1\2\3 и adr4 - фиксированная, тянущаяся или одна сторона фиксированная, другая тянущаяся?
Эта проблема решается простым css.

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		*		{margin:0px;padding:0px}
		.main	{margin-left:250px}
		.right	{width:100%;float:right; /*ie6:*/margin-left:-4px;}
		.left	{margin-left:-250px;width:250px}
		</style>
	</head>
	<body>
		<div class="main" style="background: #fdf;">
			<div class="right">4_________</div>
			<div class="left">
				<div style="background: #ddf;">
					1_________<br><br><br><br><br><br>
				</div>
				<div style="background: #dfd;">
					2_________<br><br><br><br><br><br>
				</div>
				<div style="background: #fdd;">
					3_________<br><br><br><br><br><br><br><br><br><br><br><br>
				</div>
			</div>
		</div>
	</body>
</html>

И ещё тысяча способов, плохо искали значит.

TAILER

10.04.2010 22:37

Фиксированные adr1 и adr2. И как бы adr4 не увеличивалась, чтобы adr3 тянулось вместе с увеличением adr4.

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

Aetae

10.04.2010 23:14

Цитата:

Сообщение от TAILER (Сообщение 51000)

Нужно изменить высоту adr4, которая должна быть равна - высота adr1 + высота adr2 + высота adr3.

Цитата:

Сообщение от TAILER (Сообщение 51037)

И как бы adr4 не увеличивалась, чтобы adr3 тянулось вместе с увеличением adr4.

Вы уж определитесь: adr3 тянуть или adr4?

В любом случае как-то так:

window.onload=window.onresize=function() {(a=adr3.offsetHeight+adr3.offsetTop)>adr4.offsetHeight?adr4.style.height=a+'px':adr4.style.height='';}

TAILER

10.04.2010 23:42

Aetae,
Спасибо за помощь. +1 в карму

Только вот в FF не работает почему то.
И как организовать если adr4 больше чем adr1+adr2+adr3 тянуть adr3 так чтобы adr3=adr4-adr1-adr2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
table td {
   vertical-align: top;
} 	
</style> 
<script language="javascript">
<!--
window.onload=window.onresize=function() {
(a=adr3.offsetHeight+adr3.offsetTop)>adr4.offsetHeight?adr4.style.height=a+'px':adr4.style.height='';
}
//--> 
</script>

</head>
<body>
<table cellpadding=0 cellspacing=0 style="border: 4px solid #000000;">
<tr>
  <td>     
      <table cellpadding=0 cellspacing=0 border=1 id=adr1 style="border: 4px solid #ff0000; height: 200px;">
        <tr>
          <td>1__________</td>
        </tr>
      </table>      
      <table cellpadding=0 cellspacing=0 border=1 id=adr2 style="border: 4px solid #ff0000; height: 300px;">
        <tr>
          <td>2__________</td>
        </tr>
      </table>      
      <table cellpadding=0 cellspacing=0 border=1 id=adr3 style="border: 4px solid #ff00ff;">
        <tr>
          <td>3__________ <br><br><br><br></td>
        </tr>
      </table>      
  </td>
  <td>
  <table cellpadding=0 cellspacing=0 border=1 id=adr4 style="border: 4px solid #0309fd;">
    <tr>
      <td>4__________</td>      
    </tr>    
  </table>
  </td>
</tr>
</table>
</body>
</html>

Aetae

11.04.2010 01:51

Это ужасно.

Судя по вашему сообщению, вы ну совсем не знаете javascript, html и css.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Решение на табличках вообще выглядит так:

<table cellpadding=0 cellspacing=5 border=5>
	<tr>
		<td style="height: 100px;">1__________</td>
		<td rowspan="3">4__________</td>   
	</tr>
	<tr>
		<td style="height: 200px;">2__________</td>
	</tr>
	<tr>
		<td>3__________ </td>
	</tr>
</table>

subzey

11.04.2010 17:05

Опять-таки, а зачем тут яваскрипт?

<!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" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<style type="text/css">
			.wrapper {
				margin: 0px 0px 0px 300px;
				border: solid black 2px;
			}
			* html .wrapper { /* IE6 */
				height: 0px;
			}
			.column {
				display: inline;
				float: left;
				width: 293px;
				margin: 0px -293px -4px 0px;
				position: relative;
				left: -300px;
				top: -2px;
			}
			.block1 {border: solid red 2px; margin: 0px 0px 5px 0px;}
			.block2 {border: solid blue 2px; margin: 0px 0px 5px 0px;}
			.block3 {border: solid green 2px; margin: 0px 0px 0px 0px;}
			.content {
				display: inline;
				float: left;
				
			}
			.clear {
				height: 0px;
				overflow: hidden;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="column">
				<div class="block1">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
				<div class="block2">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
				<div class="block3">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
			</div>
			<div class="content">Lorem Ipsum dolor sit amet.</div>
			<div class="clear"></div>
		</div>
	</body>
</html>

subzey

11.04.2010 17:17

Гомен насай, Aetae. Перечитал тему, и оказалось, что Вы уже предложили практически такое же решение.
Вам в карму при первой возможности идет жирный плюсик :)

TAILER

11.04.2010 21:03

Aetae,
Приводя свой пример, я больше уделил внимание своему примеру, который требует решения, в связи с этим набросал быстрый код. Javascript честно не знаю, поэтому в очередной раз пришел за подсказкой сюда. За HTML и CSS - обидел, ты не прав. Спасибо за подсказку, постараюсь с условием закончить сам.

Aetae

11.04.2010 21:29

Если знаете html и css то с чего столь ужасный табличный говнокод?) На каждый блок контента по табличке с одной ячейкой - это... извращённо(по сути получается тот же div).
В нём просто даже копаться неприятно, чтоб найти решение. =\

P.S.Так и быть, подсказка: получение элемента с id="adr1", происходит не так: adr1, а так:document.getElementById('adr1'); и это одно из первых чему учится начинающий яваскриптер. Если вы этого не знаете - вы не прочли даже обзорной статьи, и помогать вам вообще нельзя, как злостному тунеядцу.)

Часовой пояс GMT +3, время: 04:29.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице