Use clientheight to style innerhtml div?

JavaScript
1

Hi, I’ve read that clientheight is read only so I’m wondering if you can style the div within the ‘client’ to match it’s height and width properties so that no scrollbars appear when the screen is smaller.


<div id="div1">//clientheight and clientwidth I want to match
<div id="div2"></div>//height and width needs to match parent div
</div>

Then have something like this
External.js


var div1=document.getElementById('div1').clientHeight;
var y=div1
var div2=document.getElementById('div2').clientHeight=div1;

:injured:
Ok. object dosen’t suport that property!!!
How about a parent node child node thing like this
External.js


function changeDiv2(){
var div2=document.getElementById('div2');
var y=div2.paretNode.getAtribute.height;
div2.style.height=y;
}
window.onload=changeDiv2();

I’m guessing everybody can see what I’m trying to do. Please let me know if there is a way to do this.

2

The first thing to note would be:

clientHeight is a non-standard, HTML-specific property introduced in the Internet Explorer object model.

This would probably be much better suited to CSS rather than JavaScript:

e.g.:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Testing</title>
    <style>
		html,body, #div1 { height:100%; margin:0; padding:0; }
		#div1 { overflow:hidden; }
		p { border:1px solid blue; margin:50px 0; font-size:20px; }
    </style>
</head>
<body>
<div id="div1">
	<p>Testing overflow 1</p>
	<p>Testing overflow 2</p>
	<p>Testing overflow 3</p>
	<p>Testing overflow 4</p>
	<p>Testing overflow 5</p>
	<p>Testing overflow 6</p>
	<p>Testing overflow 7</p>
	<p>Testing overflow 8</p>
	<p>Testing overflow 9</p>
	<p>Testing overflow 10</p>
	<p>Testing overflow 11</p>
	<p>Testing overflow 12</p>
	<p>Testing overflow 13</p>
	<p>Testing overflow 14</p>
	<p>Testing overflow 15</p>
</div>
</body>
</html>

I think this is effectively what you are trying to achieve, no?

One thing to keep in mind, no matter what technique you end up using, is that if there is too much content to fit on someone’s screen they will not be able to get to it without scrollbars. (i.e. if they have their browser maximised and your content it still to long to fit on their screen, and you’re hiding the scrollbars by setting “overflow:hidden;” they will not have access to all the content.)

Alternatively, you could add another div to surround the paragraphs:

<div id="div1">
	<div id="div2">
		<p>Testing overflow 1</p>
		<p>Testing overflow 2</p>
		...
		<p>Testing overflow 15</p>
	</div>
</div>

With the following styles:

html,body { height:100%; margin:0; padding:0; }
#div1 { width:800px; height:600px; margin:0 auto; padding:10px;border:1px solid red; overflow:hidden;}
#div2 { width:100%; background-color:#ccc;}
p { border:1px solid blue; margin:50px 0; font-size:20px; }

The last part will give you a small area that contains your content. If you would change “overflow:hidden;” to “overflow:auto;” on #div1 you would end up with a small scrollable area in the middle of the page.

Hope this helps.

3

AussieJohn Thanks for the responce. I guess the answer to my question was a no. You can’t even use the attribute height of one element and pass it off to a variable y lets say and then use it on another element, forget the fact that the elements attribute would have to be written in the html tag itself IE8 won’t list all the attributes anyway.


<div id="dog" class="animal" width="100%" height="50%">dog</div>

Width and Height attributes return null and the length of dog . attribute . length returns 3 as the browser generates a name= attribute equal to the id. I was acctually amazed that it reported the class attribute.

In any case what you said was correct. Use CSS.


<style>
#div1{width:100%; height:10%; overflow-x:hidden;}//force scroll y vertical
#div2{width:100%; height:10%;}//width 99.5% if any borders etc. in IE8??
#div3{width:100%; height:10%;}// DITO
#div4{width:100%; height:10%;}// DITO
.WIDTH{width:100%;}//avoid using every divs id
</style>
</head>
<body>
<div id="div1">
<div id="div2" class="WIDTH">seen item</div>
<div id="div3" class="WIDTH">not seen untill scrolled</div>
<div id="div4" class="WIDTH">not seen untill scrolled</div>
</div>

The problem I was trying to overcome was the IE8 99.5% WIDTH of div within a div especialy those that have scrollbars or inner divs that have borders etc.

4

One thing to note is that <div>'s do not have a width and height attribute (in fact, most HTML elements do not have a direct width/height), which is why you can’t access those directly.
If you want to access the width or height of a HTML element you’ll need to generally use the style property, e.g.

document.getElementById("whatever").style.width;
5

Solved!!!