Changing div height with Javascript - HTML Forums

biannucci · 01-22-2005, 12:42 PM

Is there a way to control the size of a <div> element with Javascript based on the size of the browser window? I know how to find the size of a browser window, I just don't know how to change the height of a <div> element with Javascript...

I'm thinking it would be something like this

<div id="divName">
</div>

<script>
document.divName.height = windowHeight-100;
</script>

Am I on the right track here?

IKLOP · 01-22-2005, 01:39 PM

try document.getElementById("divName").style.height = windowHeight - 100;

coothead · 01-22-2005, 02:25 PM

Hi there biannucci,

and a warm welcome to these forums

IIKLOP's reply is almost OK. Assuming that windowHeight is a variable, it should be...

Code:

document.getElementById("divName").style.height = windowHeight - 100+"px";

Here is an example...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div size according to browser</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

#divName {
     border:solid 1px #000;
     text-align:center;
 }

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
  
  var windowWidth=screen.availWidth/2+"px";
  var windowHeight=screen.availHeight/4*3+"px"

function sniffer() {
    var el=document.getElementById("divName"); 
if(screen.width==1280) {
                   el.style.width=windowWidth;
                   el.style.height= windowHeight;
                   el.style.margin="auto";               
 } 
else {
if(screen.width==1024) {
                   el.style.width=windowWidth;
                   el.style.height= windowHeight;
                   el.style.margin="auto";  
 } 
else { 
if(screen.width==800) {
                   el.style.width=windowWidth;
                   el.style.height= windowHeight;
                   el.style.margin="auto";  
    }   
   }
  }
 }
onload=sniffer;
//]]>
</script>

</head>
<body>

<div id="divName"></div>

</body>
</html>

biannucci · 01-22-2005, 05:03 PM

Thank you SO much, that works beautifully!!!!

coothead · 01-22-2005, 05:26 PM

no problem, you're welcome

GreyBoy · 01-21-2006, 12:02 PM

Sorry ment to post a new thread

propunere · 06-14-2009, 05:36 PM

Hello, coothead.

I'm new here. I've created an account just to contact you. I really need your help. I've been searching for a solution to my problem for days, and finally found you giving an answer to a similar problem that somebody had back in 2005, but tried it and doesn't work as I need.

Please help me, it's becoming over-frustrating for me to keep searching... I'm a newbie, and that makes my inquiry even more difficult.

Thank you!

ISSUE:

Java scroll. When "go to bottom" is clicked I know that top-left corner is scrolled, thus can't control what will end up displayed on the bottom line.

1. Is there a way to scroll to down to a pixel and have it displayed NOT on the top line, but on the bottom line?

IF NOT...

My idea is to place an anchor that "go to bottom" links to. That anchor is inside a div (or table) with that has no fixed height, but variable height.

The height of the div (or table) should be set right on page load, and has to be the the result of either:

a) some pixel number minus viewer's available display height (not resolution).

b) viewer's display height minus some pixels.

Both ways, I can control where the anchor is placed depending on viewer's browser and the (non)existance of toolbars.

That way, on down scroll, I can have on viewer's bottom display line what I want.

Well... How do I set that table height?... And how do I make it to automatically set on page load? And... is it possible for it to change after user's each click on page? - as he might minimize the window now'n then?

Thank you very much.
I'm hoping you get to read this and be able to reply. Looking forward to it.

Have a fine evening.

edodidi · 07-27-2010, 04:45 AM

Hi,

Did you ever find a solution?
I'm having the same issue,

Thanks

coothead · 07-27-2010, 05:37 AM

Hi there edodidi,

and a warm welcome to these forums.

As this thread is very old I would suggest that you start a new one.

Make sure that you state the nature of your problem and provide a link to page in question or at least supply the page code.

ebbenezer66 · 07-29-2010, 06:13 AM

Currently Im using this div as follows

DIV STYLE="overflow: auto; height=500" width="100%">
We used this around a table to be able to get scroll bars to show
up when the data was larger than what is defined here. Well
our users use different resolutions and because of this sometimes either our buttons at the bottom of the table are hidden or there is too much space after the buttons. So I tried
using height="15%" but for some reason percent doesnt work in this Div with overflow set to auto. So now we are thinking is there a way to make the height a variable and somehow set it
dynamically depending on the availheight type of thing if so how
would this be done as far as code is concerned.

DIV STYLE="overflow: auto; height="15%" width="100%">
The other possibility is could we set a frame here instead and we dont want to use an iframe but something within our form that we could give a percentage to and it would resize depending on what the user has set. Any help would be appreciated. thanks

______________________________________

Used Auto Parts
Used Car Parts