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

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

Ответ 1

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

DEMO

Вы можете использовать .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>

Ответ 2

Просто примечание в случае, если другие имеют одинаковую проблему.

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

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());   

});

Ответ 3

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

Ответ 4

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

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

Пример скриншота

Надеюсь, это поможет. Спасибо!!