offsetHeight, clientHeight, pixelHeight - не работают в Firefox

Anderson · August 13, 2007

Вот такие дела. Есть ли какие-то аналоги перечисленным свойствам? Хочется сделать привязку - высота одного слоя относительно высоты другого. В IE и Opera это удается сделать с помощью offsetHeight, в Firefox - не получается :'(

var h = document.all('MiddleOfTheEarth').offsetHeight;
document.all('EmptyDiv').style.height = h - 400;

yopopt · August 13, 2007

document.all не понимает фаерфокс. Используйте document.getElementById.

Anderson · August 13, 2007

Мне кажется, Firefox ещ? что-то не понимает. Т.к. не помогло...

var h = document.getElementById('MiddleOfTheEarth').offsetHeight;
document.getElementById('EmptyDiv').style.height = h - 400;

yopopt · August 13, 2007

Может и не понимает, но не в этом коде. Здесь вс? в порядке.

AKS · August 13, 2007

document.getElementById('EmptyDiv').style.height = h - 400 + 'px';

yopopt · August 13, 2007

Ах да, точно! Однако в quirks mode работать будет.

Anderson · August 13, 2007

AKS, опять мимо. Ну не хочет Firefox изменять высоту слоя. Проблема в первой строчке. Если попросить JS вывести на экран значение переменной h, то Opera и IE выводят "763". Firefox же выводит - угадайте с одного раза - точно, ноль

P.S. Если вместо id слоя прописать в первой строчке id какой-нибудь таблицы, то все три браузера выводят "правильное" число. Какие-нибудь версии есть? Вкладывать таблицу в слой MiddleOfTheEarth ой как не хочется Слишком далеко зашел уже..

Anderson · August 13, 2007

Ой, все ясно стало. MiddleOfTheEarth - это эдакий контейнер для всех слоев, находящихся в середине страницы. Попробовал задать его border как 1px solid black. Opera и IE нарисовали прямоугольник, который охватил ВСЕ вложенные слои. Firefox же показал тонюсенькую черную линию.

Хоть и не в тему будет следующий вопрос, но какое свойство должно быть у div'а, чтобы его размеры в Firefox соответствовали внутреннему содержанию?

yopopt · August 13, 2007

Вот, написал - работает...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>
<div id="MiddleOfTheEarth" style="background:red;">
	<p>Lorem ipsum dolor sit amet consectetuer magna urna convallis Vivamus tincidunt. Congue a nibh nibh tempus Curabitur fermentum malesuada penatibus et vel. Volutpat adipiscing Nam Curabitur orci tincidunt nec tincidunt ut urna ac. Lorem vitae fringilla ut metus Morbi dignissim mauris a Sed eu. Sagittis tortor sapien sagittis quis ante leo libero volutpat ante a. Gravida velit tincidunt.</p>
	<p>Lorem ipsum dolor sit amet consectetuer magna urna convallis Vivamus tincidunt. Congue a nibh nibh tempus Curabitur fermentum malesuada penatibus et vel. Volutpat adipiscing Nam Curabitur orci tincidunt nec tincidunt ut urna ac. Lorem vitae fringilla ut metus Morbi dignissim mauris a Sed eu. Sagittis tortor sapien sagittis quis ante leo libero volutpat ante a. Gravida velit tincidunt.</p>
	<p>Lorem ipsum dolor sit amet consectetuer magna urna convallis Vivamus tincidunt. Congue a nibh nibh tempus Curabitur fermentum malesuada penatibus et vel. Volutpat adipiscing Nam Curabitur orci tincidunt nec tincidunt ut urna ac. Lorem vitae fringilla ut metus Morbi dignissim mauris a Sed eu. Sagittis tortor sapien sagittis quis ante leo libero volutpat ante a. Gravida velit tincidunt.</p>
	<p>Lorem ipsum dolor sit amet consectetuer magna urna convallis Vivamus tincidunt. Congue a nibh nibh tempus Curabitur fermentum malesuada penatibus et vel. Volutpat adipiscing Nam Curabitur orci tincidunt nec tincidunt ut urna ac. Lorem vitae fringilla ut metus Morbi dignissim mauris a Sed eu. Sagittis tortor sapien sagittis quis ante leo libero volutpat ante a. Gravida velit tincidunt.</p>
	<p>Lorem ipsum dolor sit amet consectetuer magna urna convallis Vivamus tincidunt. Congue a nibh nibh tempus Curabitur fermentum malesuada penatibus et vel. Volutpat adipiscing Nam Curabitur orci tincidunt nec tincidunt ut urna ac. Lorem vitae fringilla ut metus Morbi dignissim mauris a Sed eu. Sagittis tortor sapien sagittis quis ante leo libero volutpat ante a. Gravida velit tincidunt.</p>
	<p>Lorem ipsum dolor sit amet consectetuer magna urna convallis Vivamus tincidunt. Congue a nibh nibh tempus Curabitur fermentum malesuada penatibus et vel. Volutpat adipiscing Nam Curabitur orci tincidunt nec tincidunt ut urna ac. Lorem vitae fringilla ut metus Morbi dignissim mauris a Sed eu. Sagittis tortor sapien sagittis quis ante leo libero volutpat ante a. Gravida velit tincidunt.</p>
</div>
<div id="EmptyDiv" style="background:green;"></div>

<script type="text/javascript">
var h = document.getElementById('MiddleOfTheEarth').offsetHeight;
alert(h);
document.getElementById('EmptyDiv').style.height = h - 400 + "px";
alert(document.getElementById('EmptyDiv').offsetHeight);
</script>

</body>
</html>

Добавлено: Покажите код! Чего гадать-то?

Anderson · August 13, 2007

yopopt, надо было просто указать свойство overflow: auto для 'MiddleOfTheEarth', иначе Firefox трактовал этот слой как тонюсенькую линию. Всем спасибо, вопрос закрыт

Anderson · August 13, 2007

Кстати, yopopt, у меня Firefox (2.0.0.6) document.all понимает

yopopt · August 13, 2007

Sign In

offsetHeight, clientHeight, pixelHeight - не работают в Firefox

Question

Link to comment

Share on other sites

11 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

Обсуждения

Important Information