Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.02.2011, 12:34
Новичок на форуме
Отправить личное сообщение для random13 Посмотреть профиль Найти все сообщения от random13
 
Регистрация: 23.12.2009
Сообщений: 9

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

А вот с высотой возникают косяки, высота видимо в зависимости от reflow прыгает, как узнать конечный размер все таки?
Ответить с цитированием
  #2 (permalink)  
Старый 15.02.2011, 12:46
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от random13
С шириной все ясно:
element.offsetHeight
Хм.
Ответить с цитированием
  #3 (permalink)  
Старый 15.02.2011, 12:49
Новичок на форуме
Отправить личное сообщение для random13 Посмотреть профиль Найти все сообщения от random13
 
Регистрация: 23.12.2009
Сообщений: 9

Сообщение от Kolyaj Посмотреть сообщение
Хм.
ой тупанул, думал о высоте и написал высоту в сообщении, конечно я имел ввиду
element.offsetWidth


короче вопрос остается открытым
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2011, 12:50
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

<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 - ширина
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #5 (permalink)  
Старый 15.02.2011, 12:54
Кандидат Javascript-наук
Отправить личное сообщение для Иваннн Посмотреть профиль Найти все сообщения от Иваннн
 
Регистрация: 31.05.2010
Сообщений: 106

Сообщение от random13 Посмотреть сообщение
С шириной все ясно:
element.offsetHeight

А вот с высотой возникают косяки, высота видимо в зависимости от reflow прыгает, как узнать конечный размер все таки?
Всетаки, наверное с offsetHeight и проблемы. Не могу сказать как в других браузерах (к сожалению), а в IE8 данное свойвство работает стабильно(по моему чисто непрофессиональному мнению). И еще если содержащему(внешний) блоку высота тоже задается в процентах и выше по дереву нет фиксированных значений (не в %), то height всех блоков может стать auto.
Не помог, зато выговорился.
Ответить с цитированием
  #6 (permalink)  
Старый 15.02.2011, 12:54
Новичок на форуме
Отправить личное сообщение для random13 Посмотреть профиль Найти все сообщения от random13
 
Регистрация: 23.12.2009
Сообщений: 9

да вроде того
Ответить с цитированием
  #7 (permalink)  
Старый 15.02.2011, 13:31
Новичок на форуме
Отправить личное сообщение для random13 Посмотреть профиль Найти все сообщения от random13
 
Регистрация: 23.12.2009
Сообщений: 9

Сообщение от 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">
Ответить с цитированием
  #8 (permalink)  
Старый 15.02.2011, 13:49
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

<!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%;
}
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #9 (permalink)  
Старый 15.02.2011, 14:31
Новичок на форуме
Отправить личное сообщение для random13 Посмотреть профиль Найти все сообщения от random13
 
Регистрация: 23.12.2009
Сообщений: 9

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с clone() dom элемента. vitja jQuery 6 03.02.2011 13:40
Высота элемента в зависимости от высоты рядом стоящего why.not? (X)HTML/CSS 5 18.05.2010 14:37
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема, в менюшке Большой джо Элементы интерфейса 0 12.07.2009 17:12