html - コンテンツがメニューの後ろに消える

Question

gwt Web サイトを持っています。ブラウザのズーム機能を使用すると、コンテンツがメニューの後ろに表示されます。したがって、誰もテーブルを読むことができません。

使用されるレイアウト コードは次のようになります。

<div id="globalContent" style="width: 100%;">
  <table class="" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
   <tbody>
     <tr>
       <td align="left" colspan="2" style="vertical-align: middle;">
         <div id="headerContent"> </div>
       </td>
     </tr>
     <tr>
       <td align="left" style="vertical-align: top; width: 270px">
          <div id="navigationContent" class="" style="float: left">
            <table cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td align="left" style="vertical-align: top;">
                    <table class="navigationPanel" cellspacing="0" cellpadding="0"                         style="height: 100%;" aria-hidden="false"> /*menu goes here*/
                    </table>
                  </td>
                </tr>
               </tbody>
              </table>              
            </div>
       </td>
       <td style="vertical-align: middle;">
          <div id="mainContent" style="float: left; width: 100%">
           <table class="bodyPanel" cellspacing="0" cellpadding="0" style="height: 775px;"> /* Content goes here /* </table>
          </div>
       </td>
     </tr>
    </tbody>
  </table>
</div>

編集：CSS

#globalContent { 
background-color: #F1F1F1;
}
.bodyPanel {
  width: 100%;
  height: 100%;
  background-color: #F1F1F1;
  margin-top: 70px;
  position: absolute;
}

.navigationPanel { /*border: 2px Black;*/
  width: 260px;
  max-width: 260px;
  height: 100%;
  min-height: 800px;
  background-color: #F1F1F1;
  margin-right: 10px;
  position: fixed;
  z-index: 1;
  margin-top: 70px;
}

「navigationPanel」に position: fixed があり、mainContent に position: absolute がある場合。

コンテンツはメニューの右側に表示されますが、幅は 270px です。

IE8 をサポートする必要があるため、CSS3 は使用できません :-(