Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 32394

Aug 11th, 2006

I need to grab the height of a div.

Expand Post »

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

Similar Threads

Getting the height and width of content fitting DIV element. in JavaScript / DHTML / AJAX
How to have the div layer center on any browser? in JavaScript / DHTML / AJAX
div inside another div , actually over the bottom slice in HTML and CSS
Div percentage height, centered and scrolling... or not... in Site Layout and Usability

Sailor_Jerry

Reputation Points: 13

Solved Threads: 2

Junior Poster in Training

Offline

88 posts
since Aug 2005

Permalink

Aug 11th, 2006

Re: I need to grab the height of a div.

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
 
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;
};
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;
};

Last edited by FC Jamison; Aug 11th, 2006 at 3:34 pm.

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Aug 11th, 2006

Re: I need to grab the height of a div.

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.

Sailor_Jerry

Reputation Points: 13

Solved Threads: 2

Junior Poster in Training

Offline

88 posts
since Aug 2005

Permalink

Aug 11th, 2006

Re: I need to grab the height of a div.

Try changing the last line of the code to

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
d.style.minHeight = wh + 'px'; // Set minimum div height to window height
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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
if (dh < wh)
  d.style.height = wh + 'px'; // Set div height to window height only if div height is less than window height;
if (dh < wh)
  d.style.height = wh + 'px'; // Set div height to window height only if div height is less than window height;

Last edited by FC Jamison; Aug 11th, 2006 at 4:33 pm.

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Aug 12th, 2006

Re: I need to grab the height of a div.

Hi Deacon J,

Im pretty sure that you are an expert about div.....
how about my problem..?
with css <div> {overflow:scroll/auto} controls...
when the page is reloaded.. the default location of the
<div> 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!!...

ivanCeras

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

20 posts
since May 2006

Permalink

Aug 12th, 2006

Re: I need to grab the height of a div.

I'm not understanding your problem.

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

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Aug 23rd, 2007

Re: I need to grab the height of a div.

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

possitive

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Aug 2007

Permalink

Nov 21st, 2007

Re: I need to grab the height of a div.

*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.

u01jmg3

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Nov 2007

Permalink

Nov 23rd, 2007

Re: I need to grab the height of a div.

Click to Expand / Collapse Quote originally posted by 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

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: ajax refresh??

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Difficulty with forms

DaniWeb Message

Cancel Changes

User Name
Password