• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 706
  • Last Modified:

Resize DIv to fit the Cell

I have a table and in one of the Cells is a large DIV that hosts another table.

The intent is that when the table grows larger that the DIV "OVERFLOW:auto" style attribute pops up a scrollbar and allows the user to scroll to the rest of the table.

Now, the master table only has 3 rows:
1. Header with set height
2. Body row to hold the DIV cell, height not set.
3. Footer with set height

I want the body row to grow and shrink with the browser, it does.
but the DIV does not fill out the Cell as expected.

If I set the DIV height in the Style to a set pixel height, looks good, as long the browser is the correct height.

If the I set the DIV height to 100%, it stretches the cell to show the entire DIV and the footer is well off the page.

How do resize the DIV on the fly ?
Is there a style attrib that will do that ?
Do I need a Java statement ?

Thanks if your still reading.
  • 2
1 Solution
sidwelleAuthor Commented:
var y = document.body.clientHeight;
var yDiv = y - 178;
// Mydiv.style.posHeight  = yDiv;
document.getElementById("Mydiv").style.posHeight = yDiv;
Unfortunately height is one of the CSS challenges where every ancestor needs to have a height specified including the body and HTML and we can't combine pixel heights along with percentage in a cross-browser efficient CSS.

You need to use a simple JavaScript in order to achieve this which sets the Div's height to its parent's cell then assign it on window load and window resize.

I've constructed a working example for you below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
        html, body {height:100%;margin:0;}
        .maintable {height:100%;width:100%;border:0;padding:0;border-collapse:collapse;}
        .maintable td {padding:0;}
        .header {background:red;height:100px;}
        .footer {background:blue;height:100px;}
        .body {}
        .bodydiv {background:black;height:100%;}
    <script type="text/javascript">
        function setHeight() {
            var pHeight = document.getElementById("bodyCell").offsetHeight + "px";
            document.getElementById("bodyDiv").style.height = pHeight ;
        function resetHeight() {
            document.getElementById("bodyDiv").style.height = "auto";
        window.onload = setHeight;
        window.onresize = resetHeight;
    <table class="maintable">
            <td class="header">&nbsp;</td>
        <td class="body" id="bodyCell">
            <div class="bodydiv" id="bodyDiv">&nbsp;</div>
            <td class="footer">&nbsp;</td>

Open in new window

sidwelleAuthor Commented:
That works to, thanks for the help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now