Scrollable div inside a table

Question

I need to place a scrollable div in a table cell. The table should be 100% height. The div has a lot of content that doesn't fit in the screen so scrolling should appear. But I want only the div to be scrollable, not the whole page.
If I don't use table, everything is perfect:

<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;  border-style: solid;">
    <div>
       Item 1<br/>
       Item 2<br/>
       ...
       Item 300<br/>
    </div>
</div>

Div is scrollable, page has no scrollbar. But if it's wrapped in a table:

<table style="height: 100%">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
                border-style: solid;">
                <div>
                   Item 1<br/>
                   Item 2<br/>
                   ...
                   Item 300<br/>
                </div>
            </div>
        </td>
    </tr>
</table>  

page becomes scrollable, and the div ceases to be such. What can I do?

Answer 1

Shouldn't be height: 100%; and overflow: auto; on <td> ?

Answer 2

I think your main problem is that you cannot expect the div to go to 100% height, because the table that is holding it also has a % as its width.

The container of the div must have an absolute height.

This is my code:

<table height="2000px">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
                Item 1<br/>
                Item 2<br/>
                ...<br/>
                Item 300<br/>
            </div>
        </td>
    </tr>
</table>

Which uses a scroll bar on the div and because of its height also makes the page scroll bar appear.

Unforunately unless you use some hacky CSS work around (Which might won't work in all browsers) you cannot tell a div to be 100% height without giving its container an absolute height as I have done above.

If I am wrong I'm sure someone will correct me, but I have tried to give divs 100% height to fit the browser window in the past without CSS or Javascript hacks and failed.