Ottieni altezza di div senza altezza impostata in css

Question

C'è un modo per ottenere l'altezza di un elemento se non esiste una regola di altezza CSS impostata per l'elemento Non posso usare il metodo jQuery di .height() perché ha bisogno di una regola CSS impostare prima? C'è un altro modo per ottenere l'altezza?

Answer 1

jQuery .height restituirà l'altezza dell'elemento. Non ha bisogno della definizione CSS in quanto determina l'altezza calcolata.

DEMO

È possibile utilizzare .height(), .innerHeight() o outerHeight() basa su quello che ti serve.

.height() - restituisce l'altezza dell'elemento esclude padding, border e margin.

.innerHeight() - restituisce l'altezza dell'elemento include il riempimento ma esclude bordo e margine.

.outerHeight() - restituisce l'altezza del div incluso il bordo ma esclude il margine.

.outerHeight(true) - restituisce l'altezza del div tra cui margini.

Controlla qui sotto frammento di codice per la demo live. :)

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

Answer 2

Solo una nota nel caso in cui gli altri hanno lo stesso problema.

Ho avuto lo stesso problema e ha trovato una risposta diversa. Ho trovato che ottenere l'altezza di un div l'altezza è determinata dal suo contenuto deve essere avviato su window.load o window.scroll non document.ready altrimenti ottengo altezze dispari/altezze minori, cioè prima le immagini hanno caricato. Ho anche utilizzato 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()); 

}); 

Answer 3

Assicurarsi inoltre che il div è attualmente aggiunto al DOM e visibile.

Answer 4

Può farlo in jQuery. Prova tutte le opzioni .height(), .innerHeight() o .outerHeight().

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

Esempio Schermata

Spero che questo aiuti. Grazie!!