Question

我有一张桌子，在第一个tr的第一个td中我放了一个树视图，它的容器是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来控制面板内的控件并添加以下样式。如果页面中有其他元素，例如菜单，则可以减去菜单的高度：

<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>

Answer 2

尝试将'td'的位置样式设置为'position：relative'，然后将以下CSS类指定给面板：

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

查看这个小提琴：http://jsfiddle.net/KodeKreachor/4LqFS/2/

Answer 3

我使用jquery并执行以下操作：

首先，在页面的head部分包含jquery（这里我放的是远程托管版本，您可以按原样复制和粘贴）。

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

然后，将id添加到要调整大小的div中，将id添加到td，其高度将是您的“引用”（我称之为“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"));

   });

使asp面板填充其容器高度的所有高度

3 个答案: