Как получить высоту полного содержимого div с помощью jQuery?

Ответ 1

scrollHeight является свойством объекта DOM, а не функция:

Высота прокрутки элемента; он включает в себя заполнение элемента, но не его край.

Учитывая это:

<div id="x" style="height: 100px; overflow: hidden;">
    <div style="height: 200px;">
        pancakes
    </div>
</div>

Это дает 200:

$('#x')[0].scrollHeight

Например: http://jsfiddle.net/ambiguous/u69kQ/2/ (запускается с открытой консолью JavaScript).

Ответ 2

Если вы можете помочь, НЕ ИСПОЛЬЗУЙТЕ .scrollHeight.

.scrollHeight не дает одинаковые результаты в разных браузерах при определенных обстоятельствах (наиболее заметно при прокрутке).

Например:

<div id='outer' style='width:100px; height:350px; overflow-y:hidden;'>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
</div>

Если вы делаете

console.log($ ( '# внешний') scrollHeight.);

вы получите 900px в Chrome, FireFox и Opera. Это здорово.

Но, если вы прикрепляете событие wheelevent/wheel к #outer, когда вы прокручиваете его, Chrome предоставит вам постоянное значение 900px (правильно), но FireFox и Opera изменят свои значения как вы прокрутите вниз (неверно).

Очень простой способ сделать это так (немного обманщик, действительно). (Этот пример работает при динамическом добавлении контента в #outer):

$('#outer').css("height", "auto");
var outerContentsHeight = $('#outer').height();
$('#outer').css("height", "350px");

console.log(outerContentsHeight); //Should get 900px in these 3 browsers

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

Ответ 3

Мы также можем использовать -

$('#x').prop('scrollHeight') <!-- Height -->
$('#x').prop('scrollWidth')  <!-- Width -->

Ответ 4

Element.scrollHeight является свойством, а не функцией, как указано здесь. Как отмечено здесь, свойство scrollHeight поддерживается только после IE8. Если вам нужно, чтобы он работал до этого, временно установите CSS overflow и height в auto, что приведет к тому, что div займет максимальную высоту, в которой он нуждается. Затем получите высоту и измените свойства до того, чем они были раньше.

Ответ 5

Вы можете получить его с помощью .outerHeight().

Иногда возвращается 0. Для получения наилучших результатов вы можете вызвать его в своем готовом событии div.

Чтобы быть в безопасности, вы не должны устанавливать высоту div на x. Вы можете сохранить высоту auto, чтобы правильно заполнить контент с правильной высотой.

$('#x').ready( function(){
// alerts the height in pixels
alert($('#x').outerHeight());
})

Здесь вы можете найти подробное сообщение .

Ответ 6

• Использование scrollHeight не только багги, но и не работает, когда ваш контейнер имеет жестко закрепленную высоту (что, вероятно, в большинстве случаев, так как вы хотите получить высоту содержимого без самой container.height())
• @shazboticus-s-shazbot хорошо, когда вы можете беспорядочно перемещаться с высотой контейнера/иметь жестко-кодированную высоту.
• Альтернативным решением могло бы быть:

$('#outer')
    // Get children in array format, as we'll be reducing them into a single number
    .contents().toArray()
    // Filter out text and comment nodes, only allowing tags
    .filter(el => el.nodeType === 1)
    // Sum up all the children individual heights
    .reduce((accumulator, el) => $(el).outerHeight(true) + accumulator, 0);