Я хочу высоту элемента контейнера, включая поля и paddings.
Когда я навешиваю элемент в инструменте разработки Chrome, я получаю значение, которое я ищу, но когда я использую jQuery $('element').outerHeight(true); Я получаю гораздо меньшую ценность.
Элемент содержит карусель jQuery (в контейнере с position:relative и элементами position: absolute), может ли это что-то с этим делать?
Заранее спасибо
У меня есть опыт этой проблемы несколько раз, и лучшим решением без использования каких-либо плагинов или непослушных функций setTimeout является использование hook в событии onLoad в браузере. В jQuery это делается так:
$(window).load(function(){ ...outerHeight logic goes here... });
Это может быть полностью отделено от вашего стандартного $(function(){ ...code... });, поэтому весь ваш надлежащий рабочий код не должен ждать, пока загрузится каждый отдельный элемент на странице.
Почему это происходит в первую очередь:
У Chrome есть другой алгоритм рендеринга, чем Firefox, что заставляет его запускать событие onLoad, прежде чем все элементы на странице будут полностью отображены/отображены и доступны для jQuery для выбора и получения высот. setTimeout() будет работать большую часть времени, но вы не хотите развивать зависимость от чего-то настолько слепых по своей природе - кто знает, в будущем эта "причуда" в Chrome может быть исправлена!:)
У меня была та же проблема. Я получаю правильную высоту в Chrome, используя setTimeout, чтобы немного подождать:
setTimeout ( function () {
var ht = $('.my-class').outerHeight( true );
}, 1);
Я надеюсь, что это поможет!
У меня возникла такая же проблема.
Внешний вид Firefox через console.log: 430 Chrome outheight через console.log: 477
Реальный внешний свет (макет тополя): 820
После открытия Firebug или удаления строки состояния он устанавливает правильное значение (820) в console.log(и, следовательно, код работает так, как должен).
Проблема связана с изображениями. Несмотря на то, что вы запускаете его на готовом документе, не все изображения могут быть загружены еще, и поэтому вычисления неверны.
Я использую плагин desandro, и он исправил мою проблему. https://github.com/desandro/imagesloaded
Я думаю, вам может понадобиться
.outerHeight({margin: true});
По здесь:
Поля могут быть включены путем передачи карты опций с пометкой, равной true.
тот, который работал точно так, как мне следовало, был комбайном как @Matt Reilly, так и @Lasha отвечает
$(window).load(function() {
setTimeout(function() {
// all the logic in here
}, 1);
});
Я использовал для ввода кода в $(document).ready(function(){...});, но иногда он становится вонючим, поэтому выше все работает отлично.
Если окно загружено и документ готов, и вы учли его для поплавков, и вы все равно получите эту проблему, тогда рассмотрите поиск элемента с тем же идентификатором. Убедитесь, что вы получаете правильный элемент с помощью селектора jQuery. Я забыл, что у меня был еще один элемент в dom с точно таким же идентификатором. Рассмотрите возможность использования jQuery для изменения цвета фона для проверки.
Пробовал каждое из этих решений. Наконец открыл инспектора и понял, что у моего p все еще есть margin-top. Как всегда, спасибо Normalize...
Внутренние скрытые, фиксированные и абсолютные элементы не учитываются должным образом, используя внешнийHeight.
Попробуйте свойство scrollHeight:
$('element').prop('scrollHeight')