How to automatically scale down a 100% div without showing browser vertical scrollbars?

Question

I have a table with three rows. I have 1 main #container div (height 100%) and inside it is a table with 3 rows. The first and last row have fixed size content. In the second row is a #content div with 100% height and overflow:auto. (actually the table has a lot more rows and the page has more divs, but for the sake of clarity i scalled it down for this question).

If there is more content in #content than fits, a vertical scrollbar should appear next to that div's content. However, a vertical scrollbar appears at the browser window itself. When i set the #content div to a fixed size however, that vertical scrollbar does appear in the correct place.

I must be doing something wrong, or maybe misinterpreting something :) Any ideas? Maybe there's jquery/javascript out there that can monitor the page and when loading/resizing the browser, scales down that particular div?

EDIT: I just created a small example: http://wierdaonline.com/softest.html

In the ideal situation, the whole thing (table) should always be visible in the browser window, without any window scrollbar other than in the #content div.

Answer 1

It's much easier to create a fixed header and footer without using tables and using fixed position:

#header
{
    position: fixed;
    top: 0;
    height: 20px;
}

#middle
{
    position: fixed;
    top: 20px;
    bottom: 20px;
    overflow: auto;
}

#footer
{
    position: fixed;
    bottom: 0;
    height: 20px;
}

Answer 2

Set overflow: scroll in the div. You shouldn't need Javascript for this.

Answer 3

Edit: these changes should work for the height, a similar thing can be done with the width if you so desire.

javascript:

window.onresize = function() {
    var tehdiv = document.getElementById('content2');
    if($(window).height() < 100) { tehdiv.height = 50; }
    else if($(window).height() > 2000) { tehdiv.height = '100%'; }
    else { tehdiv.height = ($(window).height()/2);}
};

the content div's table:

<td valign='top' id='content2'>

Would something like this work?

window.onresize = function() {
    var minh = 50;
    var minw = 50;
    var tehh = (window.height/2);
    var tehw = (window.width/2);
    var tehdiv = document.getElementById('yourdiv');
    tehdiv.height = (tehh > minh)? tehh : minh;
    tehdiv.width = (tehw > minw)? tehw : minw;
};

That would make it scale to half the window size, as long as it can be bigger whan 50. You could also change the min to max and make it perform tehdiv.height = 100% at that point.

Answer 4

The #container 100% is 100% of the page height which can be more than the window height. Setting html and body height to 100% (=100% of the window) could help, depending on what you are trying to achieve.

Answer 5

Well since you have no choice but to use tables, I modified the HTML, but actually left the CSS the same from the demo I posted in a comment above, check it out here - the only problem I've found is in IE7 where the header and footer table cell doesn't go 100% across:

CSS

#header, #footer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    border: #000 1px solid;
    margin: 5px;
}
#footer {
    top: auto;
    bottom: 0;
}
#content {
    position: absolute;
    top: 25px;
    left: 0;
    bottom: 25px;
    right: 0;
    overflow-y: auto;
    background: #ddd;
    margin: 5px;
}

HTML

<table id="page">
    <thead>
        <tr><td id="header">Header</td></tr>
    </thead>
    <tfoot>
        <tr><td id="footer">Footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td><div id="content">Content goes here</div></td></tr>
    </tbody>
</table>

It's still better to not use tables , if you get around to switching the HTML around.