Hi,

pretty new to jquery and CSS and struggling as to how to get this to work.

I have an ASP.NET application with some static pages and a scrollable area between the header and footer areas (see the screen shot attached).

I want to resize the inner area bounded by the double light blue rectangle so that it's height changes as the user resizes their browser. I have the width changing automatically already.

I have my CSS defined like this:

.myContent
{
padding: 50px;
font-family: 'Times New Roman',Tahoma;
font-size: large;
border:double;
border-width:thick;
border-color:lightblue;
overflow:auto;
height:500px;
}

Then in my ASPx file I'll have it like this:

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <div class="myContent">
        <asp:BulletedList ID="BulletedList1" runat="server" CssClass="lallUL">
            <asp:ListItem>CUSTOMS ADVISING</asp:ListItem>
            <asp:ListItem>IMPORTS</asp:ListItem>
            <asp:ListItem>EXPORTS</asp:ListItem>
            <asp:ListItem>TRANS-SHIPMENTS</asp:ListItem>
            <asp:ListItem>FREIGHT FORWARDING</asp:ListItem>
            <asp:ListItem>INLAND HAULAGE</asp:ListItem>
            <asp:ListItem>24 HOUR SHIPPING ADVICE</asp:ListItem>
            <asp:ListItem>APPLICATION FOR ALL PERMITS</asp:ListItem>
            <asp:ListItem>APPLICATIONS FOR RELEVANT LICENCE</asp:ListItem>
            <asp:ListItem>PREPARATION – Applications for Customs Bonds</asp:ListItem>
            <asp:ListItem>CHARTERING  - AIRPLANE / VESSEL (For sensitive cargo)</asp:ListItem>
            <asp:ListItem>TRANSPORTATION</asp:ListItem>
            <asp:ListItem>BROKERAGE CONSULTANCY</asp:ListItem>
            <asp:ListItem>PREPARATION OF LETTERS (Government and Agencies)</asp:ListItem>
            <asp:ListItem>AFTER HOUR SERVICES (Including ALL Public Holidays)</asp:ListItem>
            <asp:ListItem>AIRPORT ATTENDANCE</asp:ListItem>
            <asp:ListItem>WAREHOUSING CARGO</asp:ListItem>
            <asp:ListItem>COLLECTION OF DOCUMENTS / PAYMENTS</asp:ListItem>
        </asp:BulletedList>
    </div>

</asp:Content>

I found a jquery function which is supposed to let me get the height to change when the browser is resized:

        $(function () {
            $(window).load(function () { // On load
                $('#div').css({ 'height': (($(window).height())) + 'px' });
            });
            $(window).resize(function () { // On resize
                $('#div').css({ 'height': (($(window).height())) + 'px' });
            });
        });

I have tried putting this in my Root.Master (which is inherited by all pages) within script tags in the the page's head tags.

So 2 questions:

1. Is that the right place to put the script?

2. How do I refer to div's with class of myContent only in the script?

(I know I'll hav eto adjust the script to take in consideration of the header and footer heights, but that will be the next issue) :)