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

90

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?

Samuel Lopez
quelle
2
Was lässt Sie denken height(), dass eine CSS-Regel erforderlich ist?
James Montagne
height()wird die berechnete Höhe der Elemente erhalten ...
elclanrs
1
klingt wie Sie versuchen, Höhe von etwas in einem versteckten Element zu bekommen? oder Element selbst ist versteckt. Geht nicht!
charlietfl
Fügen Sie Ihren Code hinzu, da keine heightCSS-Einstellung erforderlich ist . Dieser Link hat nichts mit jquery zu tun.
James Montagne
Dieser "Einblick" -Link ist 7 Jahre alt!
charlietfl

Antworten:

219

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.

Geben Sie hier die Bildbeschreibung ein

.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>

Selvakumar Arumugam
quelle
37

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

});
Iamsamstimpson
quelle
1
Wahrscheinlich erhalten Sie ungerade Höhen, weil es weitere Anweisungen gibt, die die Höhe ändern, nachdem Sie sie verwendet / gedruckt haben. Es wird empfohlen, am Ende Ihres Skripts nach Höhen zu fragen
Gjaa
10

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

Geben Sie hier die Bildbeschreibung ein

Hoffe das hilft. Vielen Dank!!

Madan Sapkota
quelle
8

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

Tom Scholes
quelle
13
Bitte beachten Sie, dass dies für mich eher als Kommentar als als Antwort geeignet ist.
Kkuilla
4
Er hätte keine Privilegien für Kommentare gehabt, Jungs, entspann dich.
StackOverflowed
3
Ich halte dies für eine wichtige Information, da keine der anderen Antworten funktioniert, wenn das Element zunächst nicht an das DOM angehängt ist.
Guido