I've been fiddling with this the entire day and the closest I got is the following layout that works in Chrome (but not in Firefox).

1. Is it possible to do without the tables (and without js)?
2. Is it possible to make it cross-browser(tables or not but no js)?

To see the desired behavior, try changing the height of the window/display box.  

Main points are:  

 1. The layout is always at least the size of the window, but can expand past it if the content on the left pushes it.  

 2. The scrollable area on the right always takes up the whole interior space, but doesn't expand it, meaning the height of the interior is determined by the left content (or size of window, whichever is larger). 

Here is a JSFiddle link: <http://jsfiddle.net/BNmJM/>  

And the code:

```
<!doctype html>
<html>
<head>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    border: 0;
}
html, body {
    height: 100%;
}
td{
    vertical-align:top;
}
#wrapper{
    border-collapse: collapse;
    border-spacing: 0;
    width:500px;
    margin:0 auto;
    border-left:2px dashed black;
    border-right:2px dashed black;
    height: 100%;
}
</style>
</head>
<body>
<table id="wrapper">
    <tr><td colspan=2 style="height:20px;">
        <div style="border-bottom:2px dashed black;height:20px;text-align:center;">header</div>
    </td></tr>
    <tr>
        <td>
            <div id="contentLeft" style="height:300px; width:100px;border:6px dashed green;"></div>
        </td>
        <td style="width:100px;border-left:2px dashed black">
            <div style="height:100%;width:100px;overflow-y:scroll;">
                <div id="contentRight" style="height:500px; width:60px;border:6px dashed red;"></div>
            </div>
        </td>
    </tr>
    <tr><td colspan=2 style="height:20px;">
        <div style="border-top:2px dashed black;height:20px;text-align:center;">footer</div>
    </td></tr>
</table>
</body>
</html>

```