标记如下所示：
<!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)我最初的非maintanable解决方案是在服务器后面的代码中设置此高度,如下所示：
SubTabContainerUg.Height = new Unit(TabContainerMain.Height.Value - 43);
请注意,此代码适用于IE7 / 8/9,即调整子选项卡的大小并使容器保持相同的高度(= 300 px),但上面的代码不好,因为如果我更改样式(边距/边框)对于子选项卡容器,上面的代码(确切地说是硬编码常量)也必须改变.
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');
>找到子选项卡控件的body元素(所选选项卡的主体);
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
>将子选项卡控件的主体高度设置为父选项卡控件的主体高度(减去子选项卡的标题高度和顶部位置 – 顶部位置包括任何父填充,以及任何元素边距).
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);
此解决方案适用于：
> Firefox 20.0
> Chrome 26.0.1410.64
> Internet Explorer 6/7/8/9/10
编辑：将offset()更改为position().根据position()文档：
When positioning a new element near another one and within the same containing DOM element,.position() is the more useful.
编辑2：这是一个Gist of your markup,here’s my markup and code,这是一个revision showing the differences.
>我参考了http://code.jquery.com/jquery-1.6.2.min.js – 希望您在代码中引用它的原始和未经修改的副本.>移除高度：100％;从cc1中的第一个div：TabPanel ID =“tp2”.>改变浮动的第二个div：left;漂浮：对; (此div包含cc1：TabContainer ID =“SubTabContainerUg”).>删除样式=“身高：100％;”来自cc1里面的div：TabPanel ID =“subTab1”.