how to make a scrollable div with percentage height

[sariset]

here is a sample of my problem

<table style="width:100%;height:100%">
            <tr style="height: 60%">
                <td style="width: 968px">
                    <div style="height: 100%;overflow:scroll;">
                        <div style="height: 100px;" >
                            content
                        </div>
                        <div style="height: 100px" >
                            content
                        </div>
                    </div>
                </td>
            </tr>
            <tr style="height: 40%"><td style="width: 968px"><div style="height: 100%;overflow:scroll">
                        <div style="height: 300px" >
                            content
                        </div>
                        <div style="height: 300px" >
                            content
                        </div>
                    </div></td></tr>
        </table>
 

i am not able to see the scroll bar in action at any time as it is getting expanded.
i dont want to have height in pixels as it may result in indifferent sizes in monitors with different resolutions.

please suggest me a solution for this.

[harshmaul]

Which browser are you using?

[sariset]

i am using internet explorer

[sariset]

can anyone help me out in this issue

[harshmaul]

have you tried filling out the divs with content?,

that should make the scrolling bars work

[sariset]

ya i did that but it is not working so i am looking for a solution for my problem

[harshmaul]

I'm looking for a solution too...

Please post your code with the content in the div... chances are the content isn't taking up 300px worth of space.

The content you placed in the posted example is not sufficient to force the overflow.

[sariset]

what exactly is i divided my entire space to 2 rows with 60% and 40% and now i am including div's inside the rows and made them to scroll by using overflow property.if i fix the heigh of the div in pixels i can get the result but it will not fit to screens with different resolutions

[harshmaul]

I under stand now!!!

Perfect, set the div to have a position of fixed!

so in the div's styles add this... position:fixed
You may need to tweek the sizes though.

[drhowarddrfine]

position:fixed does not work in IE6. It does work in IE7 but can cause 'haslayout' issues.

[drhowarddrfine]

Try setting the height of the containing div in percent instead of px.

[sariset]

even though i fix the div size to percentages it does't reflect the look the feel as the content within div is in pixels. i even tried fixing the entire controls in percentages and ended in a islanded position still