Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   проблема с вычислением высоты элемента (https://javascript.ru/forum/css-html/15159-problema-s-vychisleniem-vysoty-ehlementa.html)

random13 15.02.2011 12:34
проблема с вычислением высоты элемента
 
Есть простой div у которого размеры задаются динамически, то есть могут быть как точное значение так и в процентах. Внутри него добавляется еще один div у которого размеры заданы под 100%, чтоб он заполнил полностью родительский div. Задача узнать размер дочернего div'а.
С шириной все ясно: 
element.offsetHeight

А вот с высотой возникают косяки, высота видимо в зависимости от reflow прыгает, как узнать конечный размер все таки?:help:

Kolyaj 15.02.2011 12:46
Цитата:
Сообщение от random13
С шириной все ясно:
element.offsetHeight
Хм.

random13 15.02.2011 12:49
Цитата:
Сообщение от Kolyaj (Сообщение 92568)
Хм.
ой тупанул, думал о высоте и написал высоту в сообщении, конечно я имел ввиду 
element.offsetWidth


короче вопрос остается открытым

walik 15.02.2011 12:50 
<html>
<head>
	<style>
		#div1 {
			height: 300px;
			width: 200px;
			border: 1px solid;
		}
		#div2 {
			border: 1px solid red;
			height: 100%;
		}
	</style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
</div>

<script language="JavaScript">
	element = document.getElementById( "div2" );
	alert(element.offsetHeight);// Отображает высоту
	alert(element.offsetWidth);// Отображает ширину
</script>

</body>
</html>


Так что ли надо вам ?

И вы немножко перепутали:
Цитата:
С шириной все ясно:
element.offsetHeight
element.offsetHeight - высота
element.offsetWidth - ширина

Иваннн 15.02.2011 12:54
Цитата:
Сообщение от random13 (Сообщение 92565)
С шириной все ясно: 
element.offsetHeight

А вот с высотой возникают косяки, высота видимо в зависимости от reflow прыгает, как узнать конечный размер все таки?:help:
Всетаки, наверное с offsetHeight и проблемы. Не могу сказать как в других браузерах (к сожалению), а в IE8 данное свойвство работает стабильно(по моему чисто непрофессиональному мнению). И еще если содержащему(внешний) блоку высота тоже задается в процентах и выше по дереву нет фиксированных значений (не в %), то height всех блоков может стать auto.
Не помог, зато выговорился.

random13 15.02.2011 12:54
да вроде того

random13 15.02.2011 13:31
Цитата:
Сообщение от walik (Сообщение 92570) 
<html>
<head>
	<style>
		#div1 {
			height: 300px;
			width: 200px;
			border: 1px solid;
		}
		#div2 {
			border: 1px solid red;
			height: 100%;
		}
	</style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
</div>

<script language="JavaScript">
	element = document.getElementById( "div2" );
	alert(element.offsetHeight);// Отображает высоту
	alert(element.offsetWidth);// Отображает ширину
</script>

</body>
</html>


Так что ли надо вам ?

И вы немножко перепутали:


element.offsetHeight - высота
element.offsetWidth - ширина

а если указать родителю ширину и высоту 100% и заменить доктайп:
<!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" lang="ru" xml:lang="en">

walik 15.02.2011 13:49 
<!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" lang="ru" xml:lang="en">
<head>
    <style>
		html, body {
			height: 100%;
		}
        #div1 {
            height: 100%;
            width: 100%;
            border: 1px solid;
        }
        #div2 {
            border: 1px solid red;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>

<script language="JavaScript">
    element = document.getElementById( "div2" );
    alert(element.offsetHeight);// Отображает высоту
    alert(element.offsetWidth);// Отображает ширину
</script>
</body>
</html>


в стилях укажите тегу "html" и "body" - height: 100%;
html, body {
	height: 100%;
}

random13 15.02.2011 14:31
да помогло, спасиб, у меня правда есть все равно ситуация при которой не срабатывает, как поймаю этот момент, опишу его здесь может подскажите


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