Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Высота скрытого содержания в теге, если для него установлено overflow:hiden; (https://javascript.ru/forum/misc/6751-vysota-skrytogo-soderzhaniya-v-tege-esli-dlya-nego-ustanovleno-overflow-hiden%3B.html)

paratrooper1981 19.12.2009 07:59
Высота скрытого содержания в теге, если для него установлено overflow:hiden;
 
Подскажите, пожалуйста, свойство для определения высоты содержимого тега, если оно частично скрыто при помощи overflow:hidden;

Код:
<div style="overflow:hidden; height:10px;" id="teg1">
текст текст текст
<p>
текст текст текст текст
</p>
<div><img src="image.gif" /></div>
</div>
Высота видимой части тега <div> с id="teg1" определяется как document.getElementById("teg1").offsetHeight. В данном примере она будет равна 10px. Хотя в теге содержится много текста и картинка, но offsetHeight возвратит размер видимой части тега. Но есть ещё скрытое содержание тега, скрываемое при помощи указания overflow:hidden;Как можно узнать высоту всего содержимого тега <div id="teg1">..</div>, даже если оно не отображается в браузере?

x-yuri 21.12.2009 16:05
почему бы не добавлять overflow: hidden после того, как выяснишь высоту?

PeaceCoder 21.12.2009 19:21
Цитата:
Сообщение от x-yuri
почему бы не добавлять overflow: hidden после того, как выяснишь высоту?
высоту не выяснить пока не применишь код в DOM.. а если применять без хиддена, то получится мерцание контента и т.п., я лично обхожу следующим образом, если элемент скрыт (display: none): visibility: hidden, display: fixed; узнаю высоту/ширину, восстанавливаю display, visibility;

x-yuri 21.12.2009 19:34
ну тогда уж display: none, узнаем высоту, а потом display: block; overflow: hidden. Хотя все равно контент будет перемещаться. display: fixed, кстати, не везде работает ;)

а вообще все от ситуации зависит, о чем, надеюсь ТС нам сообщит. Типа, "когда нужно узнать высоту?" и "критично ли изменение расположения элементов на странице?"

PeaceCoder 21.12.2009 20:13
Цитата:
Сообщение от x-yuri
у тогда уж display: none,
неузнаешь. при display: none элемент не имеет высоты и ширины.
Цитата:
Сообщение от x-yuri
display: fixed, кстати, не везде работает
не display, а position: fixed; перепутал. А на счет не все поддерживают - опять ие6 ? он с ие7 поддерживается.

B~Vladi 21.12.2009 22:51
Цитата:
Сообщение от PeaceCoder
неузнаешь. при display: none элемент не имеет высоты и ширины.
При visibility:hidden узнаешь.

PeaceCoder 21.12.2009 23:15
Цитата:
Сообщение от B~Vladi
При visibility:hidden узнаешь.
А я что написал в посте? выше этого ответа?

subzey 21.12.2009 23:40 
var o = document.getElementById("teg1");
alert(/**/o.scrollHeight - o.clientHeight/**/)

B~Vladi 22.12.2009 00:32
Цитата:
Сообщение от PeaceCoder
А я что написал в посте? выше этого ответа?
Аха, туплю:)

x-yuri 22.12.2009 14:06
да тут по-моему все протупили, кроме subzey. Правда непонятно, зачем вычитать clientHeight, так что может и все :)

Цитата:
Сообщение от PeaceCoder
опять ие6 ?
естественно, неужели так сложно переместить элемент за верхний левый край?

paratrooper1981 22.12.2009 16:22
Спасибо всем за посильную помощь...
subzey, не запутаться бы мне в этих свойствах... Наверняка это не конечное решение на все случаи жизни, потому что элемент может иметь или не иметь полос прокрутки.

x-yuri 22.12.2009 17:47
Цитата:
Сообщение от paratrooper1981
Наверняка это не конечное решение на все случаи жизни, потому что элемент может иметь или не иметь полос прокрутки.
а если проверить?

PeaceCoder 22.12.2009 18:39
Цитата:
Сообщение от x-yuri
да тут по-моему все протупили, кроме subzey. Правда непонятно, зачем вычитать clientHeight, так что может и все
и он тоже протупил. т.к. scrollHeight некорректен для разных браузеров в частности в opera. будет выдвать на десяток точек или больше или меньше точно не помню. в MZ тоже бажит. про IE молчу.

x-yuri 22.12.2009 23:19
в тему вызывается subzey
а пока он вызывается... PeaceCoder, по поводу оперы есть 1) баг со scrollHeight, если есть полоса прокрутки. По поводу ie есть 2) баг для textarea. Они не относятся к данному случаю (не вижу смысла ставить overflow: hidden для textarea). Ты знаешь про еще какие-то?

subzey 23.12.2009 01:06
reporting in

subzey 23.12.2009 01:22 
<!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">
	<head>
		<style type="text/css">
			#wrapper {
				height: 100px;
				width: 100px;
				overflow: hidden;
				border: dashed red 1px;
			}
			.innerwrap {
				overflow: hidden; /* фикс для нижнего маргина */
				zoom: 1; /* фикс всего и вся в ie6 */
			}
			.spacer {
				height: 150px;
				margin: 10px;
				background: navy;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="innerwrap">
				<div class="spacer"></div>
				<div class="spacer"></div>
				<div class="spacer"></div>
				<!-- три по 150 и четыре по 10, итого 490 -->
			</div>
		</div>

		<script type="text/javascript">
			var o = document.getElementById("wrapper");
			alert(o.scrollHeight - o.clientHeight); /* должен вернуть 390 */
		</script>
	</body>
</html>

Протестил в IE6, O10.10, Fx3.5.

x-yuri 23.12.2009 01:59
subzey, это, конечно, не важно, но зачем ты clientHeight вычитаешь?

subzey 23.12.2009 02:16
Цитата:
Сообщение от x-yuri (Сообщение 38894)
subzey, это, конечно, не важно, но зачем ты clientHeight вычитаешь?
Невнимательно прочитал то, что требуется. :( Вычислял высоту скрытой части, а нужно — просто всей.

PeaceCoder 23.12.2009 11:32
Цитата:
Сообщение от x-yuri
баг со scrollHeight, если есть полоса прокрутки.
угу это я и имел ввиду. это я говорил в общем. в текущем случае да можно пользоваться.

paratrooper1981 23.12.2009 18:26
Спасибо всем за разъяснения. С кроссбраузерностью мне самому придётся разобраться.


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