ExternalHeight (true) дает неправильное значение

Ответ 1

У меня есть опыт этой проблемы несколько раз, и лучшим решением без использования каких-либо плагинов или непослушных функций setTimeout является использование hook в событии onLoad в браузере. В jQuery это делается так:

$(window).load(function(){ ...outerHeight logic goes here... });

Это может быть полностью отделено от вашего стандартного $(function(){ ...code... });, поэтому весь ваш надлежащий рабочий код не должен ждать, пока загрузится каждый отдельный элемент на странице.

Почему это происходит в первую очередь:
У Chrome есть другой алгоритм рендеринга, чем Firefox, что заставляет его запускать событие onLoad, прежде чем все элементы на странице будут полностью отображены/отображены и доступны для jQuery для выбора и получения высот. setTimeout() будет работать большую часть времени, но вы не хотите развивать зависимость от чего-то настолько слепых по своей природе - кто знает, в будущем эта "причуда" в Chrome может быть исправлена!:)

Ответ 2

У меня была та же проблема. Я получаю правильную высоту в Chrome, используя setTimeout, чтобы немного подождать:

    setTimeout ( function () {
        var ht = $('.my-class').outerHeight( true );
    }, 1);

Я надеюсь, что это поможет!

Ответ 3

У меня возникла такая же проблема.

Внешний вид Firefox через console.log: 430 Chrome outheight через console.log: 477

Реальный внешний свет (макет тополя): 820

После открытия Firebug или удаления строки состояния он устанавливает правильное значение (820) в console.log(и, следовательно, код работает так, как должен).

Проблема связана с изображениями. Несмотря на то, что вы запускаете его на готовом документе, не все изображения могут быть загружены еще, и поэтому вычисления неверны.

Я использую плагин desandro, и он исправил мою проблему. https://github.com/desandro/imagesloaded

Ответ 4

Я думаю, вам может понадобиться

.outerHeight({margin: true});

По здесь:

Поля могут быть включены путем передачи карты опций с пометкой, равной true.

Ответ 5

тот, который работал точно так, как мне следовало, был комбайном как @Matt Reilly, так и @Lasha отвечает

$(window).load(function() {
    setTimeout(function() {
        // all the logic in here
    }, 1);
});

Я использовал для ввода кода в $(document).ready(function(){...});, но иногда он становится вонючим, поэтому выше все работает отлично.

Ответ 6

Если окно загружено и документ готов, и вы учли его для поплавков, и вы все равно получите эту проблему, тогда рассмотрите поиск элемента с тем же идентификатором. Убедитесь, что вы получаете правильный элемент с помощью селектора jQuery. Я забыл, что у меня был еще один элемент в dom с точно таким же идентификатором. Рассмотрите возможность использования jQuery для изменения цвета фона для проверки.

Ответ 7

Пробовал каждое из этих решений. Наконец открыл инспектора и понял, что у моего p все еще есть margin-top. Как всегда, спасибо Normalize...

Ответ 8

Внутренние скрытые, фиксированные и абсолютные элементы не учитываются должным образом, используя внешнийHeight.

Попробуйте свойство scrollHeight:

$('element').prop('scrollHeight')