Calculating the height of div element dynamically

[etern_79]

Hello,


I have three div elements and they are stacked as shown below in the source code.





<div id="header">

This is Header

</div>
<div id="data">

This is data and wanted to more 1

This is data and wanted to more 2

This is data and wanted to more 3

This is data and wanted to more 4

This is data and wanted to more 5

This is data and wanted to more 6


</div>
<div id="footer">
this is footer
</div>


I have header, data, footer. The height and width of the header and footer is same e.g height is 20px and width is 100px. The width of data is also 100px, but the height of div is dynamic because the data is variant inside it and I want to make div(data) scrollable when it becomes 250px or more else should be normal and also want to place the three divs in the order like header, data, footer.


I will be thankful to advance who can help me out in this matter.

[Paragon]

el = ducoment.getElementById('data');
if(el.offsetHeight >= 250) {
el.style.height = 250+"px";
el.style.overflow = "auto";
}

you can use this code you can allready set the overflow property in the style sheet and leave it out of the js

[Garrett Smith]

Hi. Did you try this?

#data {
max-height: 250px;
overflow: auto;

/* rule for win ie \*/
-height: 250px;
/* end hide mac ie */
}

ie6 will probably need that last hack. If it works without, take it out. Mac IE might need it, too.


http://dhtmlkitchen.com/ - The best DHTML website!