Ottieni altezza del div senza altezza impostata in css

Esiste un modo per ottenere l’altezza di un elemento se non esiste una regola di altezza CSS per l’elemento Non posso usare il metodo jQuery (HEIGHT) perché ha bisogno di un set di regole CSS prima? C’è un altro modo per ottenere l’altezza?

jQuery .height ti restituirà l’altezza dell’elemento. Non ha bisogno della definizione CSS in quanto determina l’altezza calcasting.

DEMO

Puoi usare .height() , .innerHeight() o outerHeight() base a ciò che ti serve.

inserisci la descrizione dell'immagine qui

.height() – restituisce l’altezza dell’elemento esclude padding, border e margin.

.innerHeight() – restituisce l’altezza dell’elemento include padding ma esclude border e margin.

.outerHeight() – restituisce l’altezza del div incluso il bordo ma esclude il margine.

.outerHeight(true) – restituisce l’altezza del div incluso il margine.

Controlla qui sotto lo snippet di codice per la demo dal vivo. 🙂

 $(function() { var $heightTest = $('#heightTest'); $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"') .append('

Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]

') .append('

Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]

') .append('

Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]

') .append('

Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]

') });
 div { font-size: 0.9em; } 
  

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

Ho avuto lo stesso problema e ho trovato una risposta diversa. Ho scoperto che ottenere l’altezza di un div la cui altezza è determinata dal suo contenuto deve essere avviata su window.load , o window.scroll not document.ready altrimenti ottengo altezze / altezze minori, cioè prima che le immagini siano caricate. Ho anche usato 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()); }); 

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

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

Screenshot di esempio

inserisci la descrizione dell'immagine qui

Spero che questo ti aiuti. Grazie!!

Assicurati anche che il div sia attualmente aggiunto al DOM e visibile .