首先在bootstrap-tab.js里面定义一个方法去做高度计算和赋值
varchangeFrameHeight=function(that){$(that).height(document.documentElement.clientHeight-115);$(that).parent(".tab-pane").height(document.documentElement.clientHeight-130);}然后创建iframe的时候调用这个方法
content='
window.onresize=function(){vartarget=$(".tab-content.activeiframe");changeFrameHeight(target);}这三个地方都在bootstrap-tab.js里面更改即可。
改完之后来看看测试效果：
其实美化boostrap的tab页面原始效果并不难，我看到群友都自己改造了，难度不大，这里博主就给出改造思路，供大家参考。
新建文件，然后在index.html页面引用该样式文件
.nav-tabslia{line-height:2}.nav-tabs.activea{border-top:solid2px#3498db!important;}查看效果
是不是看上去赶紧好好看一些~~
上图中标签页加上上边框之后看上去要好看一些了，可是还不够美观，看来看去总觉得哪个关闭的小图标怪怪的，我们来美化一下。比如我们在boostrap-tab.js里面将关闭按钮换成带圆形边框的
将图标i标签的的class由原来的glyphiconglyphicon-remove换成glyphiconglyphicon-remove-sign即可，我们来看看效果：
为了更加符合使用习惯，我们增加一个鼠标移动到图标上面显示红色的效果，我们在boostrap-tab.css里面增加如下样式：
.nav-tabslia.glyphicon-remove-sign:hover{color:red;cursor:pointer;}效果如下
标签页里面仅仅显示文字和关闭的图标给人感觉太空洞，我们增加页面的图标。首先首页的标签页我们增加一个home图标，在index.html增加如下i标签：
然后其他每一个动态打开的tab页前面的图标就是对应的点击左边菜单对应的图标。首先我们在初始化菜单的那个做如下更改，在sidebar-menu.js文件改成这样
.nav-tabsliai:first-child{margin-right:3px;}最终得到效果如下：
当然，有可能你觉得加上这个之后tab页显得很拥挤，你也可以不加，根据自己的喜好来进行美化
经过上面三步骤的美化，我们的标签页已经好看了许多。如果你对界面要求不高，其实也够了，但是博主觉得还可以继续美化呢~
比如我们给标签也增加一个边框，使每一个标签页看上去更加像一个独立的整体。我们调整.nav-tabslia这个样式为
.nav-tabslia{line-height:2;border:1px#dddsolid;margin-right:-1px;color:#999;}然后增加
.nav-tabs{background:#fafafa;}这样看到的效果：
博主觉得使用圆角也不错啊，反正这个取决于个人喜好！
以上效果基本够用，在项目里面使用起来没有太大的问题，但博主还想将其优化下。比如我们做如下样式调整：
可能这里的颜色搭配并不协调，但至少看上去更加perfect一点吧。
首先界面上面在标签页的两边增加向左移、向右移的图标
.nav-my-tab{padding-left:0px;margin-bottom:0px;}.nav-my-tab.middletab{height:36px;overflow:hidden;border-bottom:3px#3498dbsolid;position:relative;background:#fafafa;}.nav-my-tabli{list-style-type:none;}.nav-my-tablia{padding:5px10px;}.nav-my-tab.leftbackward{float:left;background:#fff;padding-top:7px;border-top:1px#dddsolid;height:36px;border-bottom:3px#3498dbsolid;}.nav-my-tab.leftbackwarda{border-left-width:0px;color:#999;padding-top:9px;padding-bottom:8px;margin-right:-1px;}.nav-my-tab.leftbackwarda:hover,.nav-my-tab.leftbackwarda:focus{text-decoration:none;background:#ddd;}.nav-my-tab.rightforward{float:right;position:relative;line-height:2.6;background:#fff;border-top:1px#dddsolid;border-bottom:3px#3498dbsolid;}.nav-my-tab.rightforwarda{width:35.5px;line-height:2;color:#999;height:35px;padding:8px10px;padding-left:13px;border-left:1px#dddsolid;}.nav-my-tab.rightforwarda:hover,.nav-my-tab.rightforwarda:focus{text-decoration:none;background:#ddd;}最后就是左移、右移的按钮事件
这部分其实不属于Tab页的优化范畴，但既然要把这个做好，顺带也把这个优化了下。
首先在sidebar-menu.js里面增加如下id
然后在addTabs()方法的最下面加这两句即可
//激活左边菜单$('#menuli').removeClass('active');$('#li_'+options.id).addClass('active');得到效果
还有一个就是左边菜单的滚动条，当左边菜单的数量多了以后，每次展开都会导致整个页面出现滚动条，界面非常不友好，博主打算给左边菜单部分单独加上滚动条，用来控制菜单的滚动。
增加如下样式
#sidebar{overflow-x:hidden;overflow-y:auto;}这里的sidebar是左边菜单的div容器。
然后在页面初始化完成的时候给这个div固定一个动态高度。
$(function(){//固定左边菜单的高度$('#sidebar').height($(window).height()-80);});