By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

100% TABLE + 100% ROW + 100% DIV..?

P: n/a
Why does not the below code work in IE or FF? I have a table taking up
the full browser window made up of three rows. The middle row has an
ID of "row" and contains a div with an ID of "div". This script is meant to
change the height of div to that of the row in the table so that the
doesn't scroll outside of the viewport. Instead, when the browser window
is made smaller, the table gets bigger. I do not understand this. If a div
with overflow: auto worked at 100% the size of the container (a row in
a table) then I wouldn't have to go through all of this.

function Resize() {
/* Get row */

var row = document.getElementById( "row" );

/* Set DIV height to row height */

var div = document.getElementById( "div" ); = row.clientHeight + "px";


What am I trying to achieve? I want a page where the top and bottom
rows in a table remain fixed to the required height of their content, and
where the middle row's height changes in accordance with browser
resizing. In this middle row I want a div that can scroll if its contents
would cause the div's height to increase (this should be done with the
overflow auto style). It sounds simple, but while it may work in IE,
it doesn't work in Firefox or Netscape. Hence, I feel the need to write
Javascript to fix this. I read a post earlier where someone else was
trying to achieve the same effect and could understand why it didn't
work (he had the div to 100% the height of a row in 100% high
table). I figure that if I can explicitly set the height of the div in
and the height of the row in pixels then it should overcome this issue. So,
I need code that will make a table take up the full height of a viewport,
a middle row in that table taking up the remainder of the height, then
a div filling that row whilst offering overflow auto.

Any help on this would be *greatly* appreciated.
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies

P: n/a
fred wrote:
Why does not the below code work in IE or FF?

It does for me, try this...

<style type="text/css">
div {border: 1px solid red; font-family: sans-serif;"}
<table border="1" height="100%" width="100%"
cellpadding="0" cellspacing="0">
<tr><td>td in row 0</td><td>&nbsp;</td></tr>
<td height="100%" width="50%">
<div id="aDiv" style="width: 100%;" onclick="
var msg = '<b>Before resize:</b><br>'
+ this.nodeName + ' clientHeight = '
+ this.clientHeight;
var a = this;
while(a.nodeName != 'TR') {
a = a.parentNode;
msg += '<br>' + a.nodeName + ' clientHeight = '
+ a.clientHeight; = a.clientHeight + 'px';
msg += '<br><br>' + '<b>After resize:</b><br>'
+ this.nodeName + ' clientHeight = '
+ this.clientHeight;
msg += '<br>' + a.nodeName + ' clientHeight = '
+ a.clientHeight;
this.innerHTML = msg;
document.getElementById('brag').innerHTML =
'but not any longer...';
">Click on this div to resize it</div>
<td><div id="brag" style="height: 200px; width: 200px;
text-align: center; line-height: 200px">
<b>I'm the tallest...</b></div></td>
<tr><td style="height: 30px; width: 400px">
td in row 2</td><td>&nbsp;</td></tr>

Jul 23 '05 #2

P: n/a
fred wrote:
Why does not the below code work in IE or FF? I have a table taking up

Further information available at quirksmode:

Jul 23 '05 #3

P: n/a
RobG wrote:
fred wrote:
Why does not the below code work in IE or FF?

It does for me, try this...


You might also note that clientHeight is not a W3C standard, it
is a Microsoft invention and there is no public standard for it,
although it seems to be supported at least by Mozilla, Firefox
and Netscape.

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.