javascript - how to Resize child list box height in asp.net User control -

given following user control markup:

<%@ control language="c#" autoeventwireup="true" codefile="searchitem.ascx.cs" inherits="myweb.controls.searchitem" %>  <div id="container" runat="server" style="height: 100%; width: 100%;">     <div>         <asp:label id="lblsearch" runat="server" text="search:"></asp:label>         <br />         <asp:textbox id="txtsearch" runat="server"></asp:textbox>         <input id="btnsearch" type="button" value="search" onclick="searchclick(this)" /> </div> <div>     <asp:label id="lblitems" runat="server" text="available items:"></asp:label> </div> <div id="itemcontents" runat="server" style="min-height: 50%; width: 100%;border: 1px solid black;">     <asp:listbox id="lbxresults" runat="server" selectionmode="single" width="100%" autopostback="true"></asp:listbox> </div> 

i user control height equal placeholder height list box grow , fill height difference other controls of known size. useful info:

• height can have following values: 300, 400, 600 px, need listbox height compensate height difference.

• list box can contain 0 2000 elements.

• placeholder can div or asp.net tab container.

for testing purposes, did:

1. create new user control, eg. searchitem.ascx

2. create default aspx page example:

a) add user control //<%@ register tagprefix="uc" tagname="searchitem" src="~/controls/searchitem.ascx" %>

b) add body

    <form id="form1" runat="server"> <div id="changemyheight" style="height: 300px; width: 30%; float: left;">     <uc:searchitem id="availableitems" runat="server">     </uc:searchitem> </div> </form> 

now if change height of container div 500, 600.(changemyheight), have:

current behaviour:

• listbox not resizing properly. (filling height difference)

expected behaviour:

• listbox resizing , filling height difference. (like docking in winforms)

my preference css/jquery solution code behind (i thinking of using height property set child controls)

notes:

1. the sample markup uses style brevity's sake.
2. the sample markup has hard coded values demo purposes(thus demo working height 300 px not other values), feel free change style/html needed.
3. environment: vs2010/.net 4.0/jquery latest.
4. browsers: ff, ie7/8/9

---------default

<%@ page language="c#" autoeventwireup="true" codebehind="default.aspx.cs" inherits="playground.default" %> 

<script type="text/javascript">       function changeheight() {          document.getelementbyid('changemyheight').style.height = math.ceil(math.random() * 1000) + 'px';     } </script>  <form id="form1" runat="server">       <input id="button1" type="button" value="change height" onclick="changeheight()" />  <div id="changemyheight" style="height: 300px; width: 30%; float: left;border:1px solid red;">      <uc1:searchitem runat="server" id="searchitem" />  </div> </form> 

------control

    <%@ control language="c#" autoeventwireup="true" codebehind="searchitem.ascx.cs" inherits="playground.searchitem" %> <asp:listbox id="listbox1" clientidmode="static" runat="server" style="height:100%"></asp:listbox> 

------control behind

 protected void page_load(object sender, eventargs e)     {         var cnt = 1999;          (int = 0; < cnt; i++)         {             this.listbox1.items.add(path.getrandomfilename());         }     }