Forum Moderators: open

Message Too Old, No Replies

How Do I - use Javascript to set a div's height?

javascript set height div element

         

Voltius

10:44 pm on Apr 15, 2006 (gmt 0)

10+ Year Member



This has been driving me crazy for hours.

  • I have a div element named "rightground"
  • "rightground's" HEIGHT is suppose to be 100% of the page.
  • Becuase I used javascript to verticaly center another div in the middle of page, it is causing conflicts and "rightground" is not expanding its HEIGHT to 100%.
  • I already have a working function in my script that grabs the browser window's height
  • That function is named "getWindowHeight" and it returns a number (the height of the window)

Can someone please give me a simple function to add in my script. That will...

  • call the "getWindowHeight" function
  • set the HEIGHT of "rightground" (i'm using css) to the number that is returned by "getWindowHeight"

Here is what the ENTIRE script looks like currently.

<script type="text/javascript"> 
<!--
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;
}

function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('window');
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}

window.onload = function() {
setContent();
}
window.onresize = function() {
setContent();
}
//-->
</script>

This is the css for "rightground"

#rightground { 
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url(rightground.png);
background-position: top right;
background-repeat: repeat-y;
z-index: 0;
}

Voltius

2:47 am on Apr 17, 2006 (gmt 0)

10+ Year Member



ah, nevermind I got it...


function setGround() {
if (document.getElementById) {
var groundHeight = getWindowHeight();
if (groundHeight > 0) {
var groundElement = document.getElementById('rightground');
groundElement.style.height = groundHeight + 'px';
}
}
}

Don't forget

window.onload = function() {setGround();}