Get height of div with no height set in css

by

jQuery .height will return you the height of the element. It doesn’t need CSS definition as it determines the computed height.

DEMO

You can use .height(), .innerHeight() or outerHeight() based on what you need.

enter image description here

.height() – returns the height of element excludes padding, border and margin.

.innerHeight() – returns the height of element includes padding but excludes border and margin.

.outerHeight() – returns the height of the div including border but excludes margin.

.outerHeight(true) – returns the height of the div including margin.

Check below code snippet for 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>

More Related Contents:

  1. jQuery get the rendered height of an element?
  2. jQuery Adding new option to select element doesn't pick up the string [closed]
  3. Slide down button to show text HTML CSS
  4. Bootstrap 3 Collapse show state with Chevron icon
  5. Add and remove a class on click using jQuery?
  6. css width: calc(100% -100px); alternative using jquery
  7. Number nested ordered lists in HTML
  8. Making radio buttons look like buttons instead
  9. Use jQuery/CSS to find the tallest of all elements [duplicate]
  10. How do I auto-hide placeholder text upon focus using css or jquery?
  11. Set width of a “Position: fixed” div relative to parent div
  12. How to make a hover effect for pseudo elements?
  13. What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?
  14. Exporting PDF with jspdf not rendering CSS
  15. How do I get a fixed position div to scroll horizontally with the content? Using jQuery
  16. How to take id as selector when used hash?
  17. Setting equal heights for div’s with jQuery
  18. jQuery override default validation error message display (Css) Popup/Tooltip like
  19. What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
  20. Can I fade in a background image (CSS: background-image) with jQuery?
  21. Getting the actual, floating-point width of an element
  22. Bootstrap 4 with remote Modal
  23. Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery
  24. CSS for the “down arrow” on a element?
  25. How to create a diagonal line within a table cell?
  26. Show/ Hide Table Column with colspan using jQuery
  27. Weird IE8 layout glitch – why does the body background disappear?
  28. jQuery css gradient
  29. Remove vertical lines in jqGrid
  30. Removing multiple classes (jQuery)

Leave a Comment