How to set iframe take the height of content inside that, in a tabbed plane?

I have a tabbed plane in which, onclick it calls a seperate iframe.Initially I have used a fixed height of 1000px. I want to set the height of iframe to the height of content inside it?How can I implement it?

<div class="container-fluid text-center">    

<div class="col-sm-12" style="margin-top:120px">

<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" 
href="#projectOverview">OVERVIEW</a></li>
<li><a data-toggle="pill" href="#projectPosts">POSTS</a></li>
<li><a data-toggle="pill" href="#projectThreads">THREADS</a></li>
<li><a data-toggle="pill" href="#projectMembers">MEMBERS</a></li>
<li><a data-toggle="pill" href="#projectTasks">TASKS</a></li>
</ul>

</div>

<div class="tab-content col-sm-12">
<div id="projectOverview" class="tab-pane fade in active">
    <iframe  src="projectOverview.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectPosts" class="tab-pane fade">
  <iframe  src="projectPosts.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectThreads" class="tab-pane fade">
  <iframe  src="projectThreads.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectMembers" class="tab-pane fade">
 <iframe  src="projectMembers.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectTasks" class="tab-pane fade">
  <iframe  src="projectTasks.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
</div>

</div>