aspパネルの高さを容器の高さに合わせます。

Question

• 私はテーブルを持っています。最初のtrの最初のtdにはツリービューを配置し、そのコンテナはaspパネルです。

• 問題は、そのデータの高さが だからです。そのため、ツリービューの高さにかかわらず、そのコンテナ「aspパネル」を常にすべての高さに塗りつぶす方法がわかりません。事前に

        <td style="background-color: #FFD700; text-align: top;"> 
            <asp:Panel ID="Panel2" runat="server" GroupingText="Nodes" Height="100%"> 
             <div align="left" style="width: 170px; text-align: top; overflow: auto; height: 100%; 
              min-height: 100%;"> 
              <asp:TreeView runat="server" ID="treesiteMap" OnSelectedNodeChanged="SiteMapTree_SelectedNodeChanged" 
               Style="text-align: left; margin-left: 0; margin-right: auto; padding-left: 0; 
               padding-right: auto; position: static" meta:resourcekey="treesiteMapResource1"> 
               <HoverNodeStyle BackColor="LightBlue" /> 
               <SelectedNodeStyle BackColor="LightGray" /> 
              </asp:TreeView> 
             </div> 
            </asp:Panel> 
           </td> 
  

おかげ

Answer 1

'位置：相対的' にあなたの 'TD' の位置のスタイルを設定してみてください、その後、あなたのパネルに以下のCSSクラスを割り当てる：

.superPanel 
{ 
    position:absolute; 
    top:0px; 
    bottom:0px; 
} 

これをチェックアウト：http://jsfiddle.net/KodeKreachor/4LqFS/2/

Answer 2

私はjqueryを使用して、以下を実行します：

まず、ページの頭の部分にjqueryを含めます（ここでは、リモートでホストされているバージョンを置いています。そのままコピー＆ペーストできます）。

その後

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

、高さはあなたの「参照」（私は「mydiv」と「mytd」と呼んだ）になるTDにサイズを変更するのdivとidにIDを追加します。

     <td id="mytd" style="background-color: #FFD700; text-align: top;"> 
         <asp:Panel ID="Panel2" runat="server" GroupingText="Nodes" Height="100%"> 
          <div id="mydiv" align="left" style="width: 170px; text-align: top; overflow: auto; height: 100%; 
           min-height: 100%;"> 
           <asp:TreeView runat="server" ID="treesiteMap" OnSelectedNodeChanged="SiteMapTree_SelectedNodeChanged" 
            Style="text-align: left; margin-left: 0; margin-right: auto; padding-left: 0; 
            padding-right: auto; position: static" meta:resourcekey="treesiteMapResource1"> 
            <HoverNodeStyle BackColor="LightBlue" /> 
            <SelectedNodeStyle BackColor="LightGray" /> 
           </asp:TreeView> 
          </div> 
         </asp:Panel> 
        </td> 

最後に、

は、あなたの体の終わりに次のコードを追加します。

//A generic function that resizes an element's height according to another's 

    function resizeMydiv(targetElement,ReferenceElement) { 

      targetElement.css("height",ReferenceElement.height()); 
      //Code means : the css height of TargetElement should be the height of ReferenceElement. 

    } 

    $(document).ready(function() { 

      //I call my function, passing #mydiv and #mytd as the variables 
      resizeMydiv($("#mydiv"),$("#mytd")); 

    }); 

    //Optional : this calls the function again on window resize, to keep it proortional to the window size if needed. 

    $(window).resize(function() { 

      resizeMydiv($("#mydiv"),$("#mytd")); 

    }); 

Answer 3

あなたはCONTRを含むことができますDIVとパネル内部のOLSとあなたは例のページ内の他の要素、メニューを持っている場合は、メニューのheighをsubstractことができ、フォローのスタイルを追加します。

<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical" ClientIDMode="Static" > 
     <div style="height:calc(100vh - 240px);"> 
     <asp:PlaceHolder ID="phPrincipal" runat="server"></asp:PlaceHolder> 
     </div> 
    </asp:Panel>