Home/ Questions/Q 6113579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:52:31+00:00

I am trying to retrieve the body’s scrollHeight in order to reset the size

  • 0

I am trying to retrieve the body’s scrollHeight in order to reset the size of a div with id=”background1″. If in my external css I set that id to position:absolute the scrollHeight always returns 0. If I set it to position:relative scrollHeight gives me the correct value. There are of course many more selectors in the css one other of which is set to position:absolute – leaving it as such doesn’t change the above behavior. The code :

<script type="text/javascript">

  function getElement(elem)  {

     var art;

     if ( document.all ) {                  // this is the way old msie versions work      
       art = document.all[elem];  
     }
     else if ( document.layers ) {          // this is the way nn4 works    
       art = document.layers[elem];
     }
     else if ( document.getElementById ) {  // this is the way the standards work    
       art = document.getElementById( elem );
     }

     return art;
}

function toggleArticleDisplay(elem)  {

  var artArray = document.getElementsByTagName("article");

  for(var i = 0; i < artArray.length; i++)  {
     artArray[i].style.display = "none";
   }

   var art = getElement(elem);
   art.style.display = "block";

   var bg1 = document.getElementById("background1");
   bg1.style.height = "550px";  

   var b = document.getElementById("potoococha");

   alert(b.scrollHeight);

   bg1.style.height = (b.scrollHeight >= window.innerHeight) ? 
           (b.scrollHeight+20) + "px" : window.innerHeight + "px";
 }

</script>

</head>

<body id="potoococha" onLoad="toggleArticleDisplay('homeText')">

<div id="background1" style="height:615px;"/>

And now the css :

div#background1  {  position         : absolute;
                    left             : 45px;
                    top              : 0px;
                    z-index          : 1;
                    width            : 50px;
                    background-color : rgba(182,181,91,1.0); }

Merely changing that position to relative makes the javascript function return the correct scrollHeight but I need this as absolute for other reasons. Does scrollHeight not work if some element is absolutely positioned? As I said there is another later absolutely positioned element which doesn’t have any effect on scrollHeight‘s return value. Only this element which is the first child of the body element seems to be a problem. Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is kinda a dirty hack, but you could try to do this:

    bg1.style.position = "relative"; 

var savedHeight = b.scrollHeight;

bg1.style.position = "absolute";

    Not sure if that’ll work, but maybe give it a try.

    • 0