Ottieni l'altezza del div senza l'altezza impostata in css

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 .height()metodo jQuery perché prima è necessario un set di regole CSS? C'è un altro modo per ottenere l'altezza?

jQuery .heightti restituirà l'altezza dell'elemento. Non necessita di definizione CSS poiché determina l'altezza calcolata.

DEMO

È possibile utilizzare .height(), .innerHeight()o outerHeight()in base a 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 il bordo e il margine.

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

.outerHeight(true) - restituisce l'altezza del div compreso il margine.

Controlla lo snippet di codice di seguito 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>

Solo una nota nel caso altri abbiano lo stesso problema.

Ho avuto lo stesso problema e ho trovato una risposta diversa. Ho scoperto che ottenere l'altezza di un div che è l'altezza è determinata dal suo contenuto deve essere avviato su window.load , o window.scroll non document.ready altrimenti ottengo altezze dispari / altezze più piccole, 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

Spero che questo ti aiuti. Grazie!!

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