Holen Sie sich die Höhe von div ohne Höhe in CSS eingestellt

Gibt es eine Möglichkeit, die Höhe eines Elements zu ermitteln, wenn für das Element kein CSS-Höhenregelsatz festgelegt ist. Ich kann die .height()jQuery-Methode nicht verwenden , da zuerst ein CSS-Regelsatz erforderlich ist. Gibt es eine andere Möglichkeit, die Höhe zu ermitteln?

jQuery .heightgibt Ihnen die Höhe des Elements zurück. Es benötigt keine CSS-Definition, da es die berechnete Höhe bestimmt.

DEMO

Sie können verwendet werden .height(), .innerHeight()oder outerHeight()auf das, was Sie brauchen.

.height() - Gibt die Höhe des Elements ohne Polsterung, Rand und Rand zurück.

.innerHeight() - Gibt die Höhe des Elements einschließlich Auffüllung zurück, schließt jedoch Rand und Rand aus.

.outerHeight() - Gibt die Höhe des Div einschließlich Rand zurück, schließt jedoch den Rand aus.

.outerHeight(true) - Gibt die Höhe des Div einschließlich Rand zurück.

Überprüfen Sie das folgende Code-Snippet auf eine Live-Demo. :) :)

$(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>

Nur eine Anmerkung für den Fall, dass andere das gleiche Problem haben.

Ich hatte das gleiche Problem und fand eine andere Antwort. Ich fand heraus, dass das Abrufen der Höhe eines Divs, dessen Höhe durch seinen Inhalt bestimmt wird, auf window.load oder window.scroll nicht document initiiert werden muss. Andernfalls erhalte ich ungerade Höhen / kleinere Höhen, dh bevor die Bilder geladen wurden. Ich habe auch OuterHeight () verwendet .

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

});

Kann dies in jQuery tun . Probieren Sie alle Optionen aus .height(), .innerHeight()oder .outerHeight().

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

Beispiel Screenshot

Hoffe das hilft. Vielen Dank!!

Stellen Sie außerdem sicher, dass das div derzeit an das DOM angehängt und sichtbar ist .