How can I set the height of a div in a content page using percentage?

I am trying to give height to the outermost div in % but it is not increasing whereas when I give in em its working fine. Please help.

<form id="form1" runat="server">
<div style="background-color:Blue; height:50%">
  <div style="width:50%;
    height:50%;
    margin:0 auto">`enter code here`
<div sty开发者_JS百科le="width:34%;float:left;display:inline; height:100%">
        <asp:TextBox ID="TextBox5" runat="server"  style="width:100%;  height:100%"       ></asp:TextBox>
    </div>
    <div style="width:33%; float:left;display:inline; height: 100%;">
        <asp:TextBox ID="TextBox2" runat="server" Height="100%" Width="100%">  </asp:TextBox>
    </div>
    <div style=" width:33%; float:left;display:inline; height: 100%;">
        <asp:TextBox ID="TextBox3" runat="server" Width="95%" Height="100%">  </asp:TextBox> 
    </div>
   </div> 
   </div></form>

A percentage height is relative to the height of the parent element. In this case, the form element. If your intent is to have the div be 50% of the page height, you will need to make the form height: 50%, the div height: 100% and assuming the form has no parent, give the html and body a height:

html,body{
     height: 100%;   
}

http://jsfiddle.net/r2gY7/

simple

your body & html sizes should have height of 100% first.

this is called "resetting css"