Twitter Bootstrap将内容区域的高度设置为最大（无滚动条）

Question

我有一个基本的Twitter Bootstrap Layout，我想将内容区域设置为最大值，不会出现滚动条。

<div class="container">

  <div class="row">
    <div class="col-sm-3 well">Head</div>
    <div class="col-sm-9 well">
      <div class="row">
        <div class="col-sm-8 well" style="height: 100% !important">
          <div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
              <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="home">
                <div class="well">Home Area</div>
              </div>
              <div role="tabpanel" class="tab-pane" id="profile">
                <div class="well">Profile Area</div>
              </div>
            </div>

          </div>
        </div>
        <div class="col-sm-4 well"></div>
      </div>
    </div>
  </div>

</div><!-- /.container -->

我在主区域创建了一个带有标签的插件，每个标签的内容应使用最大可用高度。

http://plnkr.co/edit/wp6qv9J4pKY4ROdo74bF