I need to grab the height of a div.

[Sailor_Jerry]

Is there a way using javascript to grab the height of a div.

The issues is that when I render my html page I have a div with a set size. It only takes up about half of the screen.
When the content in that div is too large, the div increase its height to fit those contents and a scrollbar appears on the HTML page.
I want to grab the actual height of the div when the page is done loading, and make modification based on the height via javascript.

I would like to add a vertical scrollbar in the div if the content exceeds a certain height, so that the scrollbar for the whole page is not needed. Is this possible?

Thanks, sj

[FC Jamison]

This will set the height of your div to the height of the browser window:
NOTE: 'divID' is the id name of the div in the html document.

window.onload = setDiv;

function setDiv() {
  var wh = getWindowHeight(); // Window Height
  var d = document.getElementById('divID') // Get div element
  var dh = d.offsetHeight // div height
  d.style.height = wh + 'px'; // Set div height to window height
}




function getWindowHeight() {
  var windowHeight = 0;
	
  if (typeof(window.innerHeight) == 'number')
    windowHeight = window.innerHeight;
	
  else {
		
    if (document.documentElement && document.documentElement.clientHeight)
      windowHeight = document.documentElement.clientHeight;
		
    else {
      if (document.body && document.body.clientHeight)
        windowHeight = document.body.clientHeight; }; };
				
  return windowHeight;
};

[Sailor_Jerry]

Thanks really good stuff.

The issues is that, I only need to set the div to the height of the window, if the content of the div requires the div too expand.

Right now the default height of my div is 30em. I want to keep it this size unless the content returned requires the div to expand vertically. If this is the case then I want to set the height of the div to the height of the window. Like you suggested.

[FC Jamison]

Try changing the last line of the code to

d.style.minHeight = wh + 'px'; // Set minimum div height to window height

If that doesn't work, you'll have to use a conditional statement like

if (dh < wh)
  d.style.height = wh + 'px'; // Set div height to window height only if div height is less than window height;

[ivanCeras]

Hi Deacon J,

Im pretty sure that you are an expert about div.....
how about my problem..?
with css {overflow:scroll/auto} controls...
when the page is reloaded.. the default location of the
overflow scroll bars is on the top... what shoul i do to
position the scroll button/bars at the bottom of the overflow..
please... i need help... thank you very much!!...

[FC Jamison]

I'm not understanding your problem.

Can you post your code so I can run it and see exactly what you mean?

[possitive]

I have one question.. Your code can get the height of div, which is not set as 'Display:none' by CSS styles.. I have a problem.. I need to get the size (height) of DIV object, which is normaly not displayed (means, that has style defintion is: display:none).. If I'll change the CSS to 'display:block' it works, but I have Implicit value of CSS styles for my DIV 'display:none'..

Do you have any solution?

Sorry about the english, I am from Slovakia :)

lubo

[u01jmg3]

*Bump*

Just wondered how the solution written in posts #2 and #4 could be adapted to work when the window is resized (onResize) baring in mind IE7 has a bug where it goes into an infinite loop when this method is called? On top of this, does anyone know a solution to the question posted in the last post (#7)?

Thanks. Jonathan.

[MidiMagic]

I have one question.. Your code can get the height of div, which is not set as 'Display:none' by CSS styles.. I have a problem.. I need to get the size (height) of DIV object, which is normaly not displayed (means, that has style defintion is: display:none).. If I'll change the CSS to 'display:block' it works, but I have Implicit value of CSS styles for my DIV 'display:none'..

Do you have any solution?

Sorry about the english, I am from Slovakia :)

lubo

The height value you want does not exist until the div is actually rendered on the display.