Why does document.body.offsetHeight + document.body.bottomMargin not equal document.documentElement.offsetHeight

by

After much digging around I came up with this to solve the problem.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        return parseInt(
            document.defaultView.getComputedStyle(document.body, null),
            10
        );
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

and an expanded version for IE8 and below.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

More Related Contents:

  1. Parse an HTML string with JS
  2. jQuery document.createElement equivalent?
  3. When should I use jQuery’s document.ready function?
  4. How can I count text lines inside an DOM element? Can I?
  5. querySelector, wildcard element match?
  6. Copy / Put text on the clipboard with FireFox, Safari and Chrome
  7. How to serialize DOM node to JSON even if there are circular references?
  8. How do I replace text inside a div element?
  9. Dynamically creating HTML elements using Javascript?
  10. What’s standard behavior when element is clicked? Will it submit the form?
  11. Add SVG element to existing SVG using DOM
  12. How to access DOM elements in electron?
  13. Trigger CSS transition on appended element
  14. Difference between .tagName and .nodeName
  15. How to retrieve the element where a contextmenu has been executed
  16. Removing HTMLCollection elements from the DOM
  17. HTML Table with vertical rows
  18. How to give a Blob uploaded as FormData a file name?
  19. Add an element to the DOM with JavaScript
  20. What is the difference between Document and document in JavaScript?
  21. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  22. Retrieving value from with multiple option in React
  23. How to properly unload/destroy a VIDEO element
  24. How to add a onclick event to an element using javascript
  25. Test if an element can contain text
  26. Load javascript async, then check DOM loaded before executing callback
  27. How to check null objects in jQuery
  28. Replacement for deprecated `keypress` DOM event
  29. Screen Coordinates of a element, via Javascript
  30. Vanilla JS event delegation – dealing with child elements of the target element

Leave a Comment