css - 絶対配置 DIV を自動展開する方法

Question

幅 100% のヘッダー、2 列のコンテンツ div (幅 30 ～ 70%)、および幅 70% のフッター (右側の div の下部にのみ表示) で構成されるレイアウトがあります。

私のHTMLマークアップは次のようなものです:

<section id="mySection" >
  <header id="headerTop">
  </header>
  <div id="wrapperLeft">
  </div>
  <div id="wrapperRight">
  </div>
  <footer id="footerRight">
  </footer>
</section>

私のCSSは

 #mySection
 {
  margin:0 auto;
  padding:0;
  text-align:center;
  vertical-align:middle;
  overflow:hidden;
 }

 #headerTop
 {
  position:absolute;
  top:0;
  left:0;
  height:40px;
  width:100%;
  overflow:hidden;
 }

 #wrapperLeft
 {
   position:absolute;
   top:40px;
   left:0;
   width:30%;
   bottom:0;
   overflow:auto;
 }

 #wrapperRight
 {
   position:absolute;
   top:40px;
   left:30%;
   width:70%
   bottom:30px;
   overflow:auto;
 }

 #footerRight
 {
    position:absolute;
    left:30%;
    bottom:0;
    width:70%;
    overflow:hidden;
 }

左または右の div を非表示にすると、他の div が 100% で表示されるように、これをより適切に設計できるかどうかを知りたいです。JavaScriptでCSSを動的に変更し、他のdivの左と幅の値を調整できると思いますが、面倒なのでできれば避けたいです。

理想的には、div で show または hide を呼び出すと、他の div は自動的に 100% 幅に調整されます。

どちらのdivでもコンテンツの高さを制御することはできず、コンテンツの高さがウィンドウを超えたときにブラウザにスクロールバーを表示させたいと思います.

よろしくお願いします。