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

Question

Я хочу высоту элемента контейнера, включая поля и прокладки.

Когда я наводил элемент на инструменте разработки Chrome, я получаю значение, которое я ищу, но когда я использую jQuery $('element').outerHeight(true); Я получаю гораздо меньшую ценность.

Элемент содержит карусель jQuery (в контейнере с position:relative и изделиями position: absolute), может это как-то с этим связано?

Заранее спасибо

Answer 1

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

.outerHeight({margin: true}); 

В соответствии с here:

Маржа может быть включена путем передачи возможностей карты с запасом, установленным в действительности.

Answer 2

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

Firefox outerheight с помощью console.log: 430 Хром outerheight с помощью console.log: 477

Реальный outerheight (поджигатель макета): 820

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

Answer 7

тот, который работал точно так, как и должно быть для меня было комбайном обоих Reilly & @ Matt @Lasha отвечает

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

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

Answer 8

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

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

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