我如何设置嵌套ajax asp.net选项卡中的子选项卡高度？
我有2嵌套ajax asp.net选项卡。 如果我将父标签（TabContainerMain）的初始高度设置为300，如何在CSS或jquery中设置子标签（SubTabContainerUg）的高度？ 标记如下所示：
<!DOCTYPE html>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html lang="en">
<head runat="server">
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="../js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../js/modernizr-latest.js" type="text/javascript"></script>
<script src="../js/admin.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<section>
<cc1:TabContainer ID="TabContainerMain" runat="server" Height="300px">
<cc1:TabPanel ID="tp2" runat="server" HeaderText="test 2">
<ContentTemplate>
<section>
<div style="height: 100%; width: 30%; float: left;">
<div>
<asp:Label ID="Label5" runat="server" Text="Search:"></asp:Label>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="Search" onclick="SearchClick(this)" />
</div>
</div>
<div style="width: 70%; float: left;">
<cc1:TabContainer ID="SubTabContainerUg" runat="server" ActiveTabIndex="0">
<cc1:TabPanel ID="subTab1" runat="server" HeaderText="Cubes">
<ContentTemplate>
<div style="height: 100%;">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="subTab2" runat="server" HeaderText="Reports">
<ContentTemplate>
<div>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</div>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</section>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tp3" runat="server" HeaderText="test 3">
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</section>
<footer> This is footer. </footer>
</form>
</body>
</html>
注意：1）我最初的非保留解决方案是在服务器后面的代码中设置这个高度，如下所示：
SubTabContainerUg.Height = new Unit(TabContainerMain.Height.Value - 43);
注意，这段代码对于IE7 / 8/9正常工作，即调整子选项卡的大小并将容器保持在同一高度（= 300像素），但上面的代码不好，因为如果我更改样式（边距/边框）然后上面的代码（确切地说是硬编码常量）必须改变。
2）为了简洁起见，我简化了标记。 主选项卡和子选项卡都将包含控件，如文本框和列表框。
3）该页面用作对话框并在FF和IE7 / 8/9中运行。
回答
使用jQuery实现问题的解决方案相对简单。 对于要调整其父级大小的每个TabContainer ，您必须：
// SubTabContainerUg is the TagContainer's ID property.
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header');
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);
细节
找到子选项卡控件的标题元素（其中包含标签按钮）;
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header');
找到子选项卡控件的主体元素（选定选项卡的主体）;
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');
找到父标签控件的主体元素（子标签控件所在的位置）;
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
将子选项卡控件的身高设置为父选项卡控件的身高（减去子选项卡的标题高度和顶部位置 - 顶部位置包括任何父填充和任何元素边距）。
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);
此解决方案适用于：
编辑：将offset()更改为position() 。 根据position()文档：
当将一个新元素放置在另一个元素附近并且位于同一个包含DOM元素的位置时，.position（）更有用。
编辑2：这是您的标记的要点，这里是我的标记和代码，这里是一个显示差异的修订。
我参考了http://code.jquery.com/jquery-1.6.2.min.js希望你在你的代码中引用它的原始和未修改的副本。
去除height: 100%; 从cc1:TabPanel ID="tp2"的第一个div cc1:TabPanel ID="tp2" 。
将float: left;的第二个div更改为float: left; float: right; （这个div包含cc1:TabContainer ID="SubTabContainerUg" ）。
删除了style="height: 100%;" 从div里面的cc1:TabPanel ID="subTab1" 。
上一篇: How can I set child tab height in a nested ajax asp.net tab?