Full height of a html element (div) including border, padding and margin?

by

What about something like this (no jquery)? It’s similar to @gdoron’s answer but a little simpler. Tested it in IE9+, Firefox, and Chrome.

function getAbsoluteHeight(el) {
  // Get the DOM Node if you pass in a string
  el = (typeof el === 'string') ? document.querySelector(el) : el; 

  var styles = window.getComputedStyle(el);
  var margin = parseFloat(styles['marginTop']) +
               parseFloat(styles['marginBottom']);

  return Math.ceil(el.offsetHeight + margin);
}

Here is a working jsfiddle.

More Related Contents:

  1. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  2. How to hide css and js version details from weppalyzer in PHP
  3. How to make page loaders/animations/transitions
  4. toggle show/hide div with button?
  5. Textarea Auto height [duplicate]
  6. Relative Paths in Javascript in an external file
  7. Dynamically loading css stylesheet doesn’t work on IE
  8. Should CSS always precede Javascript?
  9. How to set background color of HTML element using css properties in JavaScript
  10. How do I use the Spacing Utility Classes in Bootstrap
  11. How to draw polygons on an HTML5 canvas?
  12. Convert TD columns into TR rows
  13. show loading icon until the page is load?
  14. How to use square cursor in a HTML input field?
  15. webkit-transform overwrites z-index ordering in Chrome 13
  16. Adding a new line in a JSX string inside a paragraph – React
  17. how to remove css property using javascript?
  18. TypeError: $(…).modal is not a function with bootstrap Modal
  19. jsPDF can’t get any styling to work
  20. Adding Google Translate to a web site
  21. Resetting the opacity of a child element – Maple Browser (Samsung TV App)
  22. How to do page numbering in header/footer htmls with wkhtmltopdf?
  23. Scroll Position of div with “overflow: auto”
  24. Reading non-inline CSS style info from Javascript
  25. Wrapping lists into columns
  26. How to optimize website for touch devices
  27. HTML5 input required, scroll to input with fixed navbar on submit
  28. Possible to reverse a css animation on class removal?
  29. Performance impact of using css / javascript source-maps in production?
  30. Getting a sticky header to “push up”, like in Instagram’s iPhone app using CSS and jQuery

Leave a Comment