Форум

random13 · #1 (**permalink**) 15.02.2011, 12:34

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

element.offsetHeight

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

Kolyaj · #2 (**permalink**) 15.02.2011, 12:46

Сообщение от random13

С шириной все ясно:
element.offsetHeight

Хм.

random13 · #3 (**permalink**) 15.02.2011, 12:49

Сообщение от Kolyaj

Хм.

ой тупанул, думал о высоте и написал высоту в сообщении, конечно я имел ввиду

element.offsetWidth

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

walik · #4 (**permalink**) 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 - ширина

Иваннн · #5 (**permalink**) 15.02.2011, 12:54

Сообщение от random13

С шириной все ясно:

element.offsetHeight

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

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

random13 · #6 (**permalink**) 15.02.2011, 12:54

да вроде того

random13 · #7 (**permalink**) 15.02.2011, 13:31

Сообщение от walik

<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 · #8 (**permalink**) 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 · #9 (**permalink**) 15.02.2011, 14:31

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

Форум

Справочник

Discord чат

Курсы javascript