I want the `#maincontent` div to be able to scroll and the rest of the divs to remain stationary.

When I try the following code I get the desired effect, however the `#maincontent` div extends further down then the actual viewport and I am unable to read the remaining text. I would like the height of the `#maincontent` to adjust depending on the viewport but nothing else to adjust.

**CSS**

```
#framecontentTop{
    position: inherit;
    top: 5px;
    left: 0px; /*Set left value to WidthOfLeftFrameDiv 220px*/
    right: 200px; /*Set right value to WidthOfRightFrameDiv*/
    width: 100%;
    height: 175px;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: #8b45130;
}

#maincontent{
    padding: 10px;
    position: absolute; 
    top: 175px; /*Set top value to HeightOfTopFrameDiv*/
    height: 100%;
    left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 205px; /*Set right value to WidthOfRightFrameDiv*/
    width: 500px;
    bottom: 0px;
    overflow: auto; 
    background: #fff;
}

```

**JavaScript**

```
$(function(){
    var parent= $('#maincontent');
    var parentOffset = parent.offset();
    var bottom = 0; 
    parent.find('*').each(function() {
        var elem = $(this);
        var elemOffset = elem.offset();
        var elemBottom = elemOffset.top + elem.outerHeight(true) - parentOffset.top;
        if (elemBottom > bottom) {
            bottom = elemBottom;
        }
    });
    parent.css('min-height', bottom);
});

```

Any help would be greatly appreciated, I've been frustrated with this code for some time now.