100% height table layout, with scrollable columns

I'm trying to get a simple table layout, with the following basic requirements:

• It must stretch to 100% height
• It if content exceeds 100% of the viewport, then a scroll bar should be displayed.

This example code in this JSFiddle works fine in webkit, however in Firefox, etc. it appears that its not translating correctly.

Any h开发者_开发问答elp would be very much appreciated.

---

Percentage based dimensions (width and height) don't work with overflow:auto in Mozilla or IE.

The layout engine must already know what the height of the element is before it can apply an overflow:auto to the element.

Hence .scrollable { background: red; height:700px; overflow: auto; } will work fine in Mozilla and IE (700px being some arbitrary value).