html <ifrmae>中设置点击隐藏左边菜单栏，如何使右边内容区域全屏显示？

我写的js很简单，实现了点击隐藏左边菜单功能，但右边内容区域总是不能全屏显示，有一块空白仍是调用前的div，这种隐藏有何用？求高手指点如何实现内容里面的表格也能自动全屏。就像最后两张图片中的效果一样，谢谢了！

<iframe id="iframe" src="txt.html" width="100%" frameborder="0" scrolling="no" allowtransparency="true" width="100%" height="50%" frameborder="0"></iframe>
<script>
window.onload=function(){
      function calcPageHeight(doc) {
          var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight,doc.body.offsetHeight)
          var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight,doc.body.offsetHeight)
          var height  = Math.max(cHeight, sHeight);
          return height
      }
      //根据ID获取iframe对象
      var ifr = document.getElementById('mainFrame')
      ifr.onload = function() {

          ifr.style.height='0px';
          var iDoc = ifr.contentDocument || ifr.document
          var height = calcPageHeight(iDoc)
          console.log(height)
          if(height < 850){
            height = 850;
          }
          ifr.style.height = height + 'px'
      }

}
</script>

txt.html

<table width="100%" cellspacing="0">
          <thead>
            <tr>
              <th width="10%">aa</th>
              <th width="10%">bb</th>
              <th width="10%" align="left">cc</th>
              <th width="10%" align="left">d</th>
              .
              .
              .
              <th width="10%" align="left">d</th>
            </tr>
          </thead>  
  </table> 

用的比较少,感觉你可以在隐藏左侧的同时重新设置iframe的宽度使其与屏幕宽度相等,点击出现显示左边菜单栏的时候在改会原来的宽度.

只是一个建议,楼主可以尝试一下,