Определить максимально возможную высоту DIV - PullRequest
38 голосов
/ 11 октября 2011

Есть ли рекомендуемый способ определения максимальной высоты, при которой можно установить DIV и оставаться видимым для каждого браузера?Кажется, это нигде не задокументировано и сильно зависит от реализации.

Например, см. Следующий скрипт теста:

http://jsfiddle.net/NP5Pa/2/

Это простой тестчтобы найти максимальное значение, вы можете установить атрибут высоты стиля DIV до того, как соответствующий clientHeight элемента станет 0. Вы можете подтвердить это, нажав «Найти Макс», затем увеличив найденную высоту на 1 и нажав «Установить высоту».

Некоторые примеры (Win7 / 64):

Chrome (14.0) :    134,217,726 px
Safari (5.1)  :    134,217,726 px
IE (9.0)      :     10,737,418 px
FF (7.0.1)    :     17,895,697 px

Неудивительно, что WebKit дает тот же результат, я полагаю - более удивительно, что IE и FF настолько различны.

Есть ли способ лучше?И вы получаете разные результаты в 32-битных системах?

- РЕДАКТИРОВАТЬ: Обновил скрипку, чтобы остановиться на 10 000 000 000 (и добраться быстрее) для Opera.Это много пикселей.

Ответы [ 2 ]

12 голосов
/ 13 октября 2011

Это ваш код, модифицированный для использования бинарного поиска (поэтому он намного быстрее).

http://jsfiddle.net/thai/zkuGv/4/

Он начинается с 1 пикселя и удваивается, пока не достигнет максимума(Я использую 2 53 , которое является самым большим целым числом, которое может быть сохранено в JavaScript без потери точности и может привести к ошибкам бинарного поиска), или div падает до нуля пикселей.

Предположим,мы устанавливаем для div размер h , и он исчезает, тогда максимальный размер должен быть между h / 2 и h .Оттуда мы выполняем двоичный поиск высоты h , которая не приводит к исчезновению div при установке на высоту h , но исчезает при установке на h + 1.

Тогда мы можем прийти к выводу для Opera: 2147483583 пикселей.

0 голосов
/ 13 октября 2011

Здесь попробуйте это: http://jsfiddle.net/serkanyersen/yNfuX/

Это будет учитывать свойства отступа и поля родителя.Когда вы нажмете кнопку MAX, DIV расширится до максимально доступного пространства.Я уверен, что вы можете преобразовать это в соответствии с вашими потребностями.

Это на самом деле должно быть рекурсивным, начиная с самого себя, но у меня не было времени реализовать это.* ПРИМЕЧАНИЕ. Попробуйте изменить размер страницы и раскомментируйте родительский DIV, чтобы он полностью работал.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...