0

我有一个 gwt 网站，如果我使用浏览器的缩放功能，内容会显示在菜单后面。所以没有人可以阅读表格。

使用的布局代码如下所示：

<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”具有位置：固定且 mainContent 具有位置：绝对。

内容出现在菜单右侧，但宽度为 270 像素。

我必须支持 IE8，所以我不能使用 CSS3 :-(

4

0 回答 0