在窗口上调整HTML元素的大小

Question

I found a similar question a few days ago, and I've been trying to implement one of the suggestions since then without an success. Any I have an ASPx page, not the master, that has two tables stacked one on top of the other. I've got the top formatted just the way I want. However, the bottom on I want to have it fit within the window, or better yet, show a vertical scrollbar.

I've wrapped the bottom table in a div with overflow-style: auto; in the CSS file. Then I'm using the following script in the page to manage the resizing:

    $(function () {
        $('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });

        $(window).resize(function () {
            $('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });
        });
    });

My div looks like:

<div class="tblContent">

The CSS file contains:

.tblContent 
{
    overflow-style: auto;
}

Answer 1

I'm not a master of css, but make sure to give your table a specific height to cause overflow to occur.

.tblContent 
{
    overflow: auto;
    height : 400px;
    display : block;
}

Why display : block;? Because I suck at css and I use that for almost everything. Also, I use overflow: auto. I'm not sure what overflow-style is, although it could be correct.

Also, since we both are terrible at css, here is a css reference link.

http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

for the bottom div containing the table (assuming you want it as 50% of the screen. you can obviously adjust that.):

overflow:auto;
height:50%;
width:100%;

for the table itself:

width:100%;