動的データを含むDivが高さをパーセントで受け取っていません

Question

<div> 
      <table style="width: 100%; height: 97%"> 
       <tr style="width: 100%;"> 
        <td style="height: 20%;" valign="top">      
         <div id="divHeaderControls" runat="server" style="height:40%; width:100%; 
          position: relative; background-color: White; border-width: thin;font-weight:bold;"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td style="height: 50%;" valign="top"> 
         <div id="divBody" runat="server" style="border-style: inset; height: 100%; 
          background-color: White; border-width: thin; overflow: scroll; position: relative; 
          top: 0px; left: 0px;"> 
         </div> 
        </td> 
       </tr> 
       <tr style="width: 100%;"> 
        <td style="height: 30;" valign="top"> 
         <asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" BackColor="#BFDBFF"> 
          <table style="width: 100%; background-color: White;"> 
           <tr>          
           </tr> 
          </table> 
         </asp:Panel> 
        </td> 
       </tr> 
      </table> 
     </div> 

ここで、divBodyはサーバーから実行時に動的データを表示します。 divBodyの高さをパーセンテージで設定したいと思います。しかしパーセンテージで設定されている場合は、コンテンツが表示されません。ストリップのみを表示しています

Answer 1

テーブルレイアウトを固定する必要があります。

table{ 
    table-layout: fixed; 
} 

また、親divで固定ピクセルの高さを定義するか、親要素で100％を使用してください。簡単に修正するには、

html,body{ 
    height: 100%; 
}