Заставить панель asp заполнить всю высоту контейнера

Question

• У меня есть таблица, и в первом тд первого тр я ставлю дерево, а его контейнер - панель asp.

• Проблема в том, что еговысота изменяется в соответствии с данными, поэтому я не знаю, как сделать так, чтобы ее контейнер «панель asp» всегда заполнял всю высоту td независимо от высоты представления дерева.

                              <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

Вы можете включить элементы управления внутри панели с помощью div и добавить следующий стиль. Если у вас есть другие элементы на странице, например, меню, вы можете вычесть высоту меню:

Answer 2

Я бы использовал jquery и сделал бы следующее:

Сначала включите jquery в раздел head вашей страницы (здесь я помещаю удаленно размещенную версию, которую вы можете копировать и вставлять как есть.).

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

Затем добавьте id к div, размер которого вы хотите изменить, и id к тд, высота которого будет вашей «ссылкой» (я назвал это «mydiv» и «mytd»):

                        <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

Попробуйте установить стиль позиции вашего 'td' на 'position: относительный', а затем назначьте для вашей панели следующий класс CSS:

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

Оформите эту скрипку: http://jsfiddle.net/KodeKreachor/4LqFS/2/