Получить высоту div без высоты, установленной в css

Есть ли способ получить высоту элемента, если для элемента нет набора правил высоты CSS. Я не могу использовать .height()метод jQuery, потому что ему сначала нужен набор правил CSS? Есть ли другой способ получить высоту?

jQuery .heightвернет вам высоту элемента. Ему не нужно определение CSS, поскольку он определяет вычисленную высоту.

ДЕМО

Вы можете использовать .height(), .innerHeight()или на outerHeight()основе того, что вам нужно.

.height() - возвращает высоту элемента без отступов, границ и полей.

.innerHeight() - возвращает высоту элемента, включая отступы, но исключает границу и поля.

.outerHeight() - возвращает высоту div, включая границу, но исключая поля.

.outerHeight(true) - возвращает высоту div, включая поля.

Проверьте нижеприведенный фрагмент кода для живой демонстрации. :)

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

Просто примечание на случай, если у других возникнет такая же проблема.

У меня была такая же проблема, и я нашел другой ответ. Я обнаружил, что получение высоты div, которая определяется его содержимым, должно быть инициировано в window.load или window.scroll, а не document.ready, иначе я получаю нечетные высоты / меньшие высоты, то есть до загрузки изображений. Я также использовал outerHeight () .

var currentHeight = 0;
$(window).load(function() {
    //get the natural page height -set it in variable above.

    currentHeight = $('#js_content_container').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

});

Можно сделать это в jQuery . Попробуйте все варианты .height(), .innerHeight()или .outerHeight().

$('document').ready(function() {
    $('#right_div').css({'height': $('#left_div').innerHeight()});
});

Пример снимка экрана

Надеюсь это поможет. Благодарность!!

Также убедитесь, что div в настоящее время добавлен к DOM и виден .