When I fill my page with a div, I can't get the height of the body of the page any more

When I fill my page with a div, I can't get the height of the body of the page any more

I have a page which has a button.  If the user clicks it, the button fires javascript to expand a DIV to cover the page.  This works.  However, it gets complicated because the DIV has some contents within it.  It has some text.  It also has a footer that stays in the same place no matter how much the user scrolls down the text, and that footer is needed because it has a MIMIMIZE button to get rid of the DIV, when the user decides he has read enough.

I've made a much simplified page at: https://rateforsuccess.com/showcss.htm

But I'll try and explain the problem here.

If I use javascript (and jquery) to get the height of the body tag in IE-11, it fails.  I get a height of zero.

Here is the jquery:

  1. $(document).ready(function () {

    var ch;

    ch = document.body.offsetHeight;

    alert("body offsetheight is " + ch);

    })

The actual html  is:

  1. <body>
    <div id="bigDiv" class="overlay2">
            <div id="bodytp2" style="overflow-y: scroll;">
               one<br />
                two<br />
                three<br />
                four<br />
    etc...
            </div>
            <div id="footertp2">
                <center><button class="greenbutton" onclick="shrinkDiv();return(false);">Minimize</button></center>
            </div>
        </div>











  2.   
  3.   
  4. </body>

bigDiv covers the page, and footertp2 is supposed to be at the bottom of bigDiv, and bodytp2 has text in it and is supposed to be above footertp2.

I'll show the classes below, but I should say that the main purpose of this is to find how much height I should assign to "bodytp2" so that it doesn't go under the footer, and even past the footer.  The javascript code is my way of starting to do that.

Here are the classes:

  1. .overlay2 {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    min-height: 100%;

    z-index: 1000;

    }

    #bodytp2 {

    padding: 10px;

    width: 95%;

    padding-bottom: 60px; /* Height of the footer */

    background-color: #DDCA9D;

    }

    #footertp2 {

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 60px;

    background-color: sandybrown;

    }