Calculate (total) height of other elements on the page that aren't in this element

Question

On a very messy page i have a div, i am trying to find a way to calculate the (total) height of all elements that are not in my div.

I need this calculated regardless of the position, size, and contents of the div. I have tried offsetHeight, clientHeight, and window.getComputedStyle.getPropertyValue('height') and i have discovered that offsetHeight provides the most reliable results (afaik only margin is missing).

I tried to make a non-dynamic way to calculate the height of all other elements but i had a margin of error of more than 120px (i used <body>'s height as target).

Edit:

I know how to get the rendered height of one element, i now want the rendered height off all elements except one.

Code:

var heights = {
'body'   : { 'element': document.getElementsByTagName( 'body' )[ 0 ], 'computed': window.getComputedStyle( document.getElementsByTagName( 'body' )[ 0 ], null ) },
'header' : { 'element': document.getElementById( 'headertxtContainer' ), 'computed': window.getComputedStyle( document.getElementById( 'headertxtContainer' ), null ) },
'content': { 'element': document.getElementById( 'body_div' ), 'computed': window.getComputedStyle( document.getElementById( 'body_div' ), null ) },
'footer' : { 'element': document.getElementById( 'footer_copy_right' ), 'computed': window.getComputedStyle( document.getElementById( 'footer_copy_right' ), null ) },
'br'     : [
    { 'element': document.getElementById( 'swipe' ).children[ 0 ].children[ 1 ], 'computed': window.getComputedStyle( document.getElementById( 'swipe' ).children[ 0 ].children[ 1 ], null ) },
    { 'element': document.getElementById( 'swipe' ).children[ 0 ].children[ 3 ], 'computed': window.getComputedStyle( document.getElementById( 'swipe' ).children[ 0 ].children[ 3 ], null ) },
    { 'element': document.getElementById( 'swipe' ).children[ 0 ].children[ 4 ], 'computed': window.getComputedStyle( document.getElementById( 'swipe' ).children[ 0 ].children[ 4 ], null ) },
    { 'element': document.getElementById( 'swipe' ).children[ 0 ].children[ 5 ], 'computed': window.getComputedStyle( document.getElementById( 'swipe' ).children[ 0 ].children[ 5 ], null ) } ]
};

heights.body.clientHeight = heights.body.element.clientHeight;
heights.header.clientHeight = heights.header.element.clientHeight;
heights.content.clientHeight = heights.content.element.clientHeight;
heights.footer.clientHeight = heights.footer.element.clientHeight;
heights.br[ 0 ].clientHeight = heights.br[ 0 ].element.clientHeight;
heights.br[ 1 ].clientHeight = heights.br[ 1 ].element.clientHeight;
heights.br[ 2 ].clientHeight = heights.br[ 2 ].element.clientHeight;
heights.br[ 3 ].clientHeight = heights.br[ 3 ].element.clientHeight;

heights.body.offsetHeight = heights.body.element.offsetHeight;
heights.header.offsetHeight = heights.header.element.offsetHeight;
heights.content.offsetHeight = heights.content.element.offsetHeight;
heights.footer.offsetHeight = heights.footer.element.offsetHeight;
heights.br[ 0 ].offsetHeight = heights.br[ 0 ].element.offsetHeight;
heights.br[ 1 ].offsetHeight = heights.br[ 1 ].element.offsetHeight;
heights.br[ 2 ].offsetHeight = heights.br[ 2 ].element.offsetHeight;
heights.br[ 3 ].offsetHeight = heights.br[ 3 ].element.offsetHeight;

heights.body.height = heights.body.computed.getPropertyValue( 'height' );
heights.header.height = heights.header.computed.getPropertyValue( 'height' );
heights.content.height = heights.content.computed.getPropertyValue( 'height' );
heights.footer.height = heights.footer.computed.getPropertyValue( 'height' );
heights.br[ 0 ].height = heights.br[ 0 ].computed.getPropertyValue( 'height' );
heights.br[ 1 ].height = heights.br[ 1 ].computed.getPropertyValue( 'height' );
heights.br[ 2 ].height = heights.br[ 2 ].computed.getPropertyValue( 'height' );
heights.br[ 3 ].height = heights.br[ 3 ].computed.getPropertyValue( 'height' );

heights.body.lineheight = heights.body.computed.getPropertyValue( 'line-height' );
heights.header.lineheight = heights.header.computed.getPropertyValue( 'line-height' );
heights.content.lineheight = heights.content.computed.getPropertyValue( 'line-height' );
heights.footer.lineheight = heights.footer.computed.getPropertyValue( 'line-height' );
heights.br[ 0 ].lineheight = heights.br[ 0 ].computed.getPropertyValue( 'line-height' );
heights.br[ 1 ].lineheight = heights.br[ 1 ].computed.getPropertyValue( 'line-height' );
heights.br[ 2 ].lineheight = heights.br[ 2 ].computed.getPropertyValue( 'line-height' );
heights.br[ 3 ].lineheight = heights.br[ 3 ].computed.getPropertyValue( 'line-height' );

heights.body.margin = heights.body.computed.getPropertyValue( 'margin' );
heights.header.margin = heights.header.computed.getPropertyValue( 'margin' );
heights.content.margin = heights.content.computed.getPropertyValue( 'margin' );
heights.footer.margin = heights.footer.computed.getPropertyValue( 'margin' );
heights.br[ 0 ].margin = heights.br[ 0 ].computed.getPropertyValue( 'margin' );
heights.br[ 1 ].margin = heights.br[ 1 ].computed.getPropertyValue( 'margin' );
heights.br[ 2 ].margin = heights.br[ 2 ].computed.getPropertyValue( 'margin' );
heights.br[ 3 ].margin = heights.br[ 3 ].computed.getPropertyValue( 'margin' );

heights.body.padding = heights.body.computed.getPropertyValue( 'padding' );
heights.header.padding = heights.header.computed.getPropertyValue( 'padding' );
heights.content.padding = heights.content.computed.getPropertyValue( 'padding' );
heights.footer.padding = heights.footer.computed.getPropertyValue( 'padding' );
heights.br[ 0 ].padding = heights.br[ 0 ].computed.getPropertyValue( 'padding' );
heights.br[ 1 ].padding = heights.br[ 1 ].computed.getPropertyValue( 'padding' );
heights.br[ 2 ].padding = heights.br[ 2 ].computed.getPropertyValue( 'padding' );
heights.br[ 3 ].padding = heights.br[ 3 ].computed.getPropertyValue( 'padding' );

heights.body.border = heights.body.computed.getPropertyValue( 'border' );
heights.header.border = heights.header.computed.getPropertyValue( 'border' );
heights.content.border = heights.content.computed.getPropertyValue( 'border' );
heights.footer.border = heights.footer.computed.getPropertyValue( 'border' );
heights.br[ 0 ].border = heights.br[ 0 ].computed.getPropertyValue( 'border' );
heights.br[ 1 ].border = heights.br[ 1 ].computed.getPropertyValue( 'border' );
heights.br[ 2 ].border = heights.br[ 2 ].computed.getPropertyValue( 'border' );
heights.br[ 3 ].border = heights.br[ 3 ].computed.getPropertyValue( 'border' );

console.log( heights );

Page Layout:

The page is very, very messy but i will try to type some sort layout:

<body id="swipe" >
    <div>
        <div id="headertxtContainer"></div>
        <br>
        <div id="body_div"></div>
        <br>
        <br>
        <br>
        <div id="footer_copy_right"></div>
    </div>
</body >

This is the general layout, i need to calculate the height that remains on the page minus the height of #body_div. height, padding, border, and margin of everything is unknown.

jQuery has some good methods for doing this .innerHeight() .outerHeight() check out the documentation — Luke, Oct 15 '15 at 08:44
I should ask you to provide a link, but i won't be using Jquery so never mind. I would like a *pure css, javascript, html solution* (see question tags and note that `jquery` is not amongst them). — x13, Oct 15 '15 at 08:48
No need to be mardy my friend! Go and find out how to calculate the margin and padding of an element then... — Luke, Oct 15 '15 at 08:49
Possible duplicate of [CSS / JavaScript - How do you get the rendered height of an element?](http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element) — Luke, Oct 15 '15 at 08:51
Also, go and look at the Javascript code behind outerHeight and innerHeight and you'll see how it's done using Javascript. — Luke, Oct 15 '15 at 08:53
@Coulton i did, margin and padding are `0`. This is not a duplicate because i asked for rendered height off **all** elements. — x13, Oct 15 '15 at 08:59
You want solution of your problem, yet you didnt share the codes you've completed so far! — Xahed Kamal, Oct 15 '15 at 09:10
Ok, so you need some code to [loop through all elements on the page](http://stackoverflow.com/a/4256372/894792) (or [just the child elements](http://stackoverflow.com/a/10474679/894792) of body) then you need to [calculate the height of the elements](http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element) and [whilst you're looping determine that you exclude the height of your specific div](http://stackoverflow.com/a/5898748/894792). Or use jQuery? — Luke, Oct 15 '15 at 09:16
@Coulton yes, but without jquery but with a result that is accurate on 1px — x13, Oct 15 '15 at 09:17
It's difficult to help without knowing the HTML layout of your page, can you post that? — Luke, Oct 15 '15 at 09:19
@Coulton that is the same problem i have, i build the code i have now based on knowledge of the page layout. I need a solution that works without knowledge of the page layout. — x13, Oct 15 '15 at 09:20
I think you just need to get the total height of all child elements of the body element minus the total height of your specified div, it should be as simple as that. — Luke, Oct 15 '15 at 09:21

score 5 · Accepted Answer · edited May 23 '17 at 11:50

I'm posting this with the risk of an immediate down voting attack judging by the mood of this question so far.

I've tried to collate some of my knowledge that I've picked up since this question was posted. I've produced a piece of a code according to some assumptions and if the assumptions are incorrect please feel free to correct me and I will attempt to update the code.

A pure JavaScript solution
A solution that makes no assumption of the elements on the page (other than the elusive div or element we want to exclude).
Calculation of the total height of all elements on the page. I have taken this as all immediate child elements of the body tag.
Calculation of the elements including any padding and borders according to this answer.
The final height should be minus the height of a single element (a DIV in the OP's case)

Here's the code I have so far:

function calculateTotalHeightMinusElement(excludeElementClass)
{
  // Get all child elements of the body tag
  var bodyChildren = (document.getElementsByTagName('body')[0]).children;

  var totalHeight = 0;

  // Loop through the selected elements
  for (var i = 0; i < bodyChildren.length; i++) {

    // Add the height of this element
    totalHeight = totalHeight + bodyChildren[i].offsetHeight;
  }

  // Get the height of the element we want to exclude
  var excludedElementHeight = document.getElementsByClassName(excludeElementClass)[0].offsetHeight;

  // Calculate height minus the excluded element
  var finalHeight = totalHeight - excludedElementHeight;

  // Display the final height in an alert
  alert("Total height: " + finalHeight);
}

document.addEventListener("DOMContentLoaded", function(event) {

  // Pass in the class name of the element you want to minus from the height calculation
  calculateTotalHeightMinusElement("myDivClass");
});

Many thanks. I'm sorry if i did sound a bit moody, i was stuck on this for multiple days. But you just fixed it, thank you! Have a nice day! — x13, Oct 15 '15 at 11:19

Calculate (total) height of other elements on the page that aren't in this element

1 Answers1