css - 1 番目の DIV 要素により、高さが 100% の 2 番目の DIV 要素内のコンテンツが画面外に押し出される

Question

他の多くの質問を読みましたが、解決策を問題に組み込む方法がわかりません。

メイン コンテンツの DIV を 100% の高さにすると、DIV の外側とブラウザーの上部に別の要素を追加する場合を除いて、完全に正常に機能します。100% の DIV はブラウザーの高さ全体を保持し、ブラウザーの上部にある新しい要素を考慮しません。これにより、DIV の下部にあるコンテンツが表示されなくなります。

詳細：

1. 必要な結果の 1 つは、ブラウザーのスクロール バーを配置しないことです。
2. 本番環境では、ブラウザの幅と高さが 100% の FLASH オブジェクトを含む DIV です。
3. FLASH の埋め込みにどの HTML バージョンを使用するのが最適かは完全にはわかりません。必要に応じて、別の質問でこれを理解できます。

JSFiddle コード例:

1. これは、青色のコンテンツ ボックスが通常どのように表示されるかを示しています

     body {
       background-color: #FFFFFF;
   
       height: auto;
   
       margin: 0;
   
       min-height: 100%;
   
       overflow: hidden;
   
   }
   
   #logo {
       background-color: #000000;
       height: 40px;
       width: 100px;
       display: none;
   }
   
   #panel-1 {
       background-color: #CCCCCC;
       display: block;
       height: 100%;
       position: fixed;
       width: 100%;
   }
   
   #panel-content {
       background: none repeat scroll 0 0 #CCFFEE;
       bottom: 0;
       height: 50px;
       position: absolute;
       width: 100%;
   }
   <div>
   <div id="header">
       <div id="logo"></div>
   </div>
   <div style="" id="content-wrapper">
       <div id="panel-1">
           <div id="panel-content"></div>
       </div>
   </div>
   </div>
   

2. これは、要素が上部に追加されたときに下部の青いボックスに何が起こるかを示しています

     body {
       background-color: #FFFFFF;
       height: auto;
       margin: 0;
       min-height: 100%;
       overflow: hidden;
   }
   
   #logo {
       background-color: #000000;
       height: 40px;
       width: 100px;
   
   }
   
   #panel-1 {
       background-color: #CCCCCC;
       display: block;
       height: 100%;
       position: fixed;
       width: 100%;
   
   }
   
   #panel-content {
       background: none repeat scroll 0 0 #CCFFEE;
       bottom: 0;
       height: 50px;
       position: absolute;
       width: 100%;
   }
   <div>
   <div id="header">
       <div id="logo"></div>
   </div>
   <div style="" id="content-wrapper">
       <div id="panel-1">
           <div id="panel-content"></div>
       </div>
   </div>
   </div>