| | |
I need to grab the height of a div.
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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
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
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.
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; };
Last edited by FC Jamison; Aug 11th, 2006 at 3:34 pm.
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.
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.
Try changing the last line of the code to
If that doesn't work, you'll have to use a conditional statement like
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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;
Last edited by FC Jamison; Aug 11th, 2006 at 4:33 pm.
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!!...
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!!...
ivan_ceras at_yahoo_dot_com
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
Do you have any solution?
Sorry about the english, I am from Slovakia

lubo
•
•
Join Date: Nov 2007
Posts: 1
Reputation:
Solved Threads: 0
*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.
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.
•
•
•
•
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
Daylight-saving time uses more gasoline
![]() |
Similar Threads
- Getting the height and width of content fitting DIV element. (JavaScript / DHTML / AJAX)
- How to have the div layer center on any browser? (JavaScript / DHTML / AJAX)
- div inside another div , actually over the bottom slice (HTML and CSS)
- Div percentage height, centered and scrolling... or not... (Site Layout and Usability)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: ajax refresh??
- Next Thread: Monitor Resolution Detection for Tables
| Thread Tools | Search this Thread |
acid2 ajax ajaxcode ajaxexample ajaxhelp animate array automatically beta box bug calendar cart checkbox class codes column cookies createrange() css cursor date debugger decimal design dom download dropdown editor element embed enter error explorer firefox focus frameworks getselection google gwt hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math menu microsoft mimic mp4 object onmouseover parent paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search select session shopping size sql text textarea toggle variables w3c website window windowofwords windowsxp wysiwyg \n






