Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Expand a scrolling Div to fill a table cell?

Posted on 2004-04-08
11
866 Views
Last Modified: 2007-12-19
I would like a scrolling DIV to expand to fill the height of a table cell that is dynamic, but don't know how or if it is even possible.  You can take a look at the DIV here:

www.fleer.com

It is right in the middle.  If you look, the title line above it, the space in between, and the cell the div is in are located in one table, simplified below.

<table width="159" border="0" cellspacing="0" cellpadding="0">
<tr>
      <td>
      <a href="http:// link here">
      <span class="Title"> Product Name here </span></a>
      </td>
</tr>
<tr>
      <td height="5"></td>
</tr>
<tr>
      <td>
      <div id="Layer1" style="position:absolute; width:200px;      height:90px; overflow:auto; overflow-x:visible;">
            <span class="BodyText">  text here  </span>
      </div>
      </td>
</tr>
</table>

It is currently set for a fixed height, but I would like it to be dynamic to fill the cell vertically.  Is that possible?

Thanks

Brian
0
Comment
Question by:brianlees
  • 4
  • 4
  • 3
11 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10786836
The CSS standard include a value that should handle this:
style="height:inherit"

Unfortuantely it is not support by IE and is only semi-reliable in browsers that do support it.

I think you will need a scripted solution, so in th ehead of the page put:

<script type="text/javascript">
<!--
function setSize()
{
   obj=document.getElementById('Layer1');
   obj.style.height=obj.parentNode.offsetHeight+'px';
}

onload=setSize;
onresize=setSize;
//-->
</script>

And you have another problem.  The layer gets out of place when you resize the screen down.  You ned to get rid of the absolute position, which should not be necessary anyway.

Cd&
0
 

Author Comment

by:brianlees
ID: 10786859
Hmmm...  not quite.  I added that to the header and I changed the DIV to this:

<script type="text/javascript">
<!--
function setSize()
{
   obj=document.getElementById('CollectText');
   obj.style.height=obj.parentNode.offsetHeight+'px';
}

onload=setSize;
onresize=setSize;
//-->
</script>


<tr>
     <td>
     <div id="CollectText" style=" width:200px; overflow:auto; overflow-x:visible;">
          <span class="BodyText">  text here  </span>
     </div>
     </td>
</tr>

But, it is not displaying correctly.  Take a look:

http://www.fleer.com/index2.cfm
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10786955
It fills the cell.  IF you mean there is a problem because it expands the cell; that is because the cell does not have a size declared so it sizes to the content.

As long as you are going to use tables, especially nested tables, instead more modern approachs you have to be aware that every chang you make can affect other parts of the layout.  It is all tied together.

Cd&
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:brianlees
ID: 10786962
Ah, that was the problem.  I don't know how large the cell will be.  The table, however, does have a fixed height, as you can see.  But the cell is variable because the product name in the cell above can be one or two lines in length.

I guess there aren't any other solutions for this?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10787037
The only solution for this kind of layout, is that something must have a fixed size, and then you can use scripting to calculate and resize everything else.  The problem is that the more complex it gets, the more difficult it is to get it to reliably cross-browser and cross-resolution.

Tables are intended for data presentation, not layout control. There are severe limits when you need a flexible layout, and you are locked inside of nested tables.

Cd&
0
 
LVL 4

Expert Comment

by:caner_elci
ID: 10796261
Also you can use expressions for div's height but it will be a Internet Explorer specific solution... I'm not sure if other browsers support expressions for style properties..

Caner
0
 

Author Comment

by:brianlees
ID: 10801528
Can you explain the "expressions" thing?  I can try it and browser test.
0
 
LVL 4

Expert Comment

by:caner_elci
ID: 10801551
You can use expression like this:

<div style="width:expression(tableCell.width);">

for more information you can read http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/setexpression.asp
0
 

Author Comment

by:brianlees
ID: 10804802
Hmmm...  tried it with height, but it did not work...even in IE.
0
 
LVL 4

Expert Comment

by:caner_elci
ID: 10805462
Well, I think it's because you used it like exactly how I typed..  Check offsetHeight property of table, and you may need to use parseInt().. I'll check it and let you know tomorrow..
0
 
LVL 4

Accepted Solution

by:
caner_elci earned 125 total points
ID: 10817760
Hello there,

I tried expression thing, but it made my IE hang.. so, I tried something else, and it worked.. Give your table cell an initial height, this value may be less than you want it to be.. I mean just set to 1, it doesn't matter, browser will set it to max possible to show all content.. then set your div's height property (using css) 100%. This will made your div auto resize...

Just like this code (I put another div in the first cell with contentEditable property on, just to make sure it's resizing the second div):

<html>
<body>
<table border=1 width=100%>
<tr><td id=myCell>
<div contenteditable=true>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
fdfsdfsklfnklsfnklsafnlksdfn<br>
</div>
</td>
<td height=100>
<div style="width:100px;height:100%;overflow:auto;">
fdsfdsafdsagfdhgdshgfhghgds fsd fsdaf dasf sda fsda fsd fsd fsdaf sda fads fsd fs fsa
fdsfdsafdsagfdhgdshgfhghgds fsd fsdaf dasf sda fsda fsd fsd fsdaf sda fads fsd fs fsa
fdsfdsafdsagfdhgdshgfhghgds fsd fsdaf dasf sda fsda fsd fsd fsdaf sda fads fsd fs fsa
fdsfdsafdsagfdhgdshgfhghgds fsd fsdaf dasf sda fsda fsd fsd fsdaf sda fads fsd fs fsa
fdsfdsafdsagfdhgdshgfhghgds fsd fsdaf dasf sda fsda fsd fsd fsdaf sda fads fsd fs fsa
fdsfdsafdsagfdhgdshgfhghgds fsd fsdaf dasf sda fsda fsd fsd fsdaf sda fads fsd fs fsa
</div>
</table>
</body>
</html>
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Advice on Xojo as a development tool over VB. 4 71
REReplaceNoCase help 1 43
Using jQuery to set a DIV attribute on page load 9 41
Domain Service Not Responding 14 30
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question