Почему JQuery не определяем высоту элемента?

Question

[last_round]

У меня имеется такая разметка (Pug):

.more
                        .more__body
                            .more__t__desc Description:
                            .more__desc Lorem 
                            .progress
                                .progress__head Your progress:
                                .progress__bar
                                    .progress__front
                            .author
                                img.author__img(src="images/profile.jpg")
                                .author__name Simple text
                        .more__btn more info

И мне нужно узнать высоту блока .more
В коде я пишу:
console.log $('.more').height()

но в консоли я получаю 0.
Предполагаю что этот элемент ещё не отрендерился, если так, то как мне это проверить.

Comments

[Ankhena]

А CSS от этого кода? Может, она и правда 0.
А лучше все вместе на jsfiddle.net

Answer 1

[Денис Инешин]

Включаем вангу.

Можно предположить что .moreэто у вас скрытый блок, который будет показан если что-то там нажать? Если да, то он наверное имеет display: none? Если да, то невозможно вычислить высоту элемента, который не нарисован.

Обойти проблему (если сильно нужно) можно специальной техникой:
1. Помещаем .more в еще один контейнер, который имеет height: 0; ovefrlow: none; - по сути тоже скрыт, но можно измерить высоту контента.
2. Можно скопировать контент, поместить в скрытый блок за пределами экрана, измерить высоту и удалить.

Comments

[Максим]

с юмором ... с новым годом ...

[last_round]

.more не скрыт, он просто не виден:

.more
    padding: 0 15px
    position: absolute
    top: calc(-100% + 40px)

Answer 2

[Максим]

сохранить в переменную и выводить в cansole.log(var)

Comments

[last_round]

Не получилось, я делаю так:

rr = $('.more').height()
console.log rr

[Максим]

last_round, не не не в скобках выводить переменную

[Максим]

last_round,

var win =  $(window).height();


         alert(win);