引导程序中的标签全高答案

【问题标题】：tabs full height in bootstrap引导程序中的标签全高
【发布时间】：2015-10-20 21:53:49
【问题描述】：

基于example here，我正在尝试将选项卡放入具有完整尺寸的面板主体中，就像效果很好的示例一样，但在我的情况下，我仍然没有完整高度的选项卡内容。谁能给我解释一下是什么问题？

以上代码：example.js文件与示例相同

<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
      html, body, .tabset, .tab-content, .tab-pane, .tabbable {
       height:100%;
      }

     .panel-body .tab-content {
        height:100%;
        min-height:100%;
        background:green;
      }
      .panel-body {
      height:100%;
      min-height:100%;
      }

      .panel{
      height:100%;
      min-height:100%;

      }
    </style>
  </head>
  <body>
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title"> Example

    </h4>
  </div>
  <div class="panel-wrapper collapse in">
    <div class="panel-body" ng-controller="TabsDemoCtrl"> 
  <tabset>
    <tab heading="Static title">
        Static content
    </tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        {{tab.content}}
    </tab>
  </tabset>
  </div>
  </div>
  </div>
  </body>
</html>

【问题讨论】：

你得到垂直滚动，是你的问题吗？
不，我的问题是我没有完整的标签高度（绿色）
您能详细说明一下吗？
如果你打开plnkr.co/edit/sSheXC?p=preview并用我上面的代码替换代码你可以看到标签内容的高度不是全高

标签： html css angularjs twitter-bootstrap

【解决方案1】：

您需要为没有指定height 组件的中间元素panel-wrapper 添加高度，height: inherit 将从父元素.panel 继承高度，即100%，然后是@ 987654327@ 类可以利用得到height。

.panel-wrapper{
    height: inherit;
}

Working Plunkr

【讨论】：

Pankaj Parkar 感谢您的回答，但是当我尝试您的解决方案时出现此错误错误：[ng:areq] Argument 'myController' is not a function, got undefined
@Devjava 对我来说效果很好..你一定有其他网络问题

【解决方案2】：

您忘记添加面板

只需将 tabset 包装在 div 中，使用这样的面板类

<div class="panel panel-default">
<tabset>
    <tab heading="Static title">
        Static content
    </tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        {{tab.content}}
    </tab>
  </tabset>
</div>

高度随心所欲

【讨论】：