>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.

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

  $('.myContent')

>
>(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) :)