jQuery .height
irá retornar a altura do elemento. Não precisa de definição CSS, pois determina a altura calculada.
DEMO
Você pode usar .height()
, .innerHeight()
ou outerHeight()
com base no que você precisa.
.height()
- retorna a altura do elemento exclui preenchimento, borda e margem.
.innerHeight()
- retorna a altura do elemento inclui preenchimento, mas exclui borda e margem.
.outerHeight()
- retorna a altura do div incluindo a borda, mas exclui a margem.
.outerHeight(true)
- retorna a altura do div incluindo a margem.
Verifique o trecho de código abaixo para uma demonstração ao vivo. :)
$(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>
height()
precisa de uma regra de css?