<div class="container"><h4>Кликаем по табам и считаем высоту </h4></div>
<div id="exTab1" class="container"> 
<ul  class="nav nav-pills">
      <li class="active">
        <a  href="#1a" data-toggle="tab">Overview</a>
      </li>
      <li><a href="#2a" data-toggle="tab">Using nav-pills</a>
      </li>
      <li><a href="#3a" data-toggle="tab">Applying clearfix</a>
      </li>
      <li><a href="#4a" data-toggle="tab">Background color</a>
      </li>
    </ul>

      <div class="tab-content clearfix">
        <div class="tab-pane active" id="1a"> 
        TAB 1The short version of the installation is simple: update your package index, install the mysql-server package, and then run the included security script.
        </div>
        <div class="tab-pane" id="2a">
          The short version of the installation is simple: 
          TAB 2</>
        </div>
        <div class="tab-pane" id="3a">
       The short version of the installation is simple: update your package index, install the mysql-server package, and then run the included security script.
  The short version of the installation is simple: update your package index, install the mysql-server package, and then run the included security script.The short version of the installation is simple: update your package index, install the mysql-server package, and then run the included security script.        
          TAB 3
        </div>
          <div class="tab-pane" id="4a">
            The short version of the installation is simple: update your package index, install the mysql-server package, and then run the included security script.The short version of the installation is simple: update your package index, install the mysql-server package, and then run the included security script.
          TAB 4
        </div>
      </div>
  </div>


<!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div id='info'><h2>Вот тут будет содержимое и высота таба</h2></div>

body {
  padding : 10px ;
 
}

#exTab1 .tab-content {
  color : white;
  background-color: #428bca;
  padding : 2px;
}

s for the tab */

#exTab1 .nav-pills > li > a {
  border-radius: 0;
}

#info{
  margin:2px 130px;
  background-color:yellow;
  width:400px; 
}

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var el = $('div.tab-pane.active');
  var height = el.outerHeight();
  $('#info').html((el.html())+ "<b> width - "+ height + " px</b>"); 
})