Problem sizing grid

Dear all,

I want to display a grid in a PopUp with a fixed header, a resizable grid an a fixed footer. The three divs “header”, “data” (in data the grid is attached) and “footer” are defined usinf CSS only.

Unfortunately the grid itself doesn’t follow the resizing of the popup window.

Here is the code:


my grid example
<script type="text/javascript">
 myGrid = new dhtmlXGridObject("gridBox"); 

          myGrid.load("/temp_files/21ABB256-8A8C-2041-AB29-B6E5D8CE40C1.xml", function () {

  Copy to pasteboard...

And here the CSS to define the 3 divs

body {
margin: 0;
padding: 0;
height: 100%;

#container {
min-height: 100%;
position: relative;
background-color: #ffffff;

#header {
background-color: #000000;
padding: 10px;

#data {
padding: 5px;
width: 100%;
background-color: #ffffff;

#footer {
position: absolute;
padding: 10px;
bottom: 0;
width: 100%;
height: 40px;
background-color: #000000;

If I use

with the fix height the grid is visible but with a height of 300px. If I remove it only the header of the grid is visible.

For me it seams that grid framework is not able to calculate the size of zhe “data” div and therefore it´s nocht able to calculate the dimensions of the usable area.

Any ideas how to configure the grid to follow a vertical/horizontal resizing of the popup window??


Please, try to use the enableAutoWidth/Height methods: … width.html … eight.html

Won´t work.

I solve the issue using dHTMLLayout instead of a CSS only solution.

Great tool…