I just started to learn CSS and I want a page with two independent columns, each has a scroll bar. And my CSS is like (span4 and span8 are div class)

```
body { 
       height: 100%; 
       overflow: hidden; } 
.span4 {
        height: 100%;
        overflow: auto; }
.span8 { 
        height: 100%;
        overflow: auto; }

```

It seems not working. I have to specify the height of span4 and span8, like "400px", but I don't want to do this (not responsible?, also I don't know the height). Do I miss something? If this can be done without JavaScript, that'll be good (I know little of js). Thanks.

Update: still can't figure it out. Here is a link to illustrate: <http://jsfiddle.net/hPfKk/2/>