>>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?
>
>That way this script will be loaded from all pages based on that master.
>

Yes, that's what I want. It needs to be available for all pages.

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

>  $('.myContent')
>

>

Hmm... that's what I had tried and it doesn't seem to work.

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

Thanks