在Chrome浏览器和IE浏览器中工作的表溢出，但不是Firefox

我试图得到总是占用整个屏幕的布局，不多不少。该布局有一个标题行，一个200px宽的左栏（可滚动）和一个可滚动内容区域。在Chrome浏览器和IE浏览器中工作的表溢出，但不是Firefox

这适用于Chrome和IE，但在Firefox中滚动条从不显示也不工作。有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> 
<html> 
<head> 
    <style type="text/css"> 
* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
    background-color: yellow; 
    overflow: hidden; 
} 

#viewTable { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
} 

#header { 
    height: 72px; 
    background-color: blue; 
} 

#leftcol { 
    vertical-align: top; 
    width: 200px; 
    height: 100%; 
    background-color: green; 
} 

#menu { 
    height: 100%; 
    overflow: auto; 
} 

#rightcol { 
    vertical-align: top; 
    width: auto; 
    height: 100%; 
    background-color: purple; 
} 

#content { 
    height: 100%; 
    overflow: auto; 
} 
    </style> 
</head> 
<body> 
</body> 
<table id="viewTable" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td colspan="2" id="header"> 
      Header 
     </td> 
    </tr> 
    <tr> 
     <td id="leftcol"> 
      <div id="menu"> 
       0<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       100<br/> 
      </div> 
     </td> 
     <td id="rightcol"> 
      <div id="content"> 
       0<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       1<br/> 
       100<br/> 
      </div> 
     </td> 
    </tr> 
</table> 
hi 
</html>

我宁愿使用CSS，但找不到任何方法来做到这一点。

嗨不应该显示，它只是在那里来验证它没有。

谢谢！

来源

2012-04-05 Craig

第一件事，我注意到：从来不使用表的布局，它们被设计为只能表格数据。 – 2012-04-05 22:11:15

是的。我同意马特K.（+1） – 2012-04-05 22:14:20

我怀疑它与FF如何处理“高度：100％”有关。如果我改变这个值，我可以看到滚动条，你可以从那里开始！ – 2012-04-05 22:20:43

这是绝对定位的理想用例。

始终保持您的HTML尽可能简单。

<html> 
    <body> 
     <div id="header"> 
      Header 
     </div> 
     <div id="leftcol"> 
      Leftcol 
     </div> 
     <div id="rightcol"> 
      main area 
     </div> 
    </body> 
</html>

CSS设置绝对定位和溢出：自动在你的列上。

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    background-color: yellow; 
    overflow: hidden; 
} 
#header{ 
    position: absolute; 
    top: 0px; 
    left:0px; 
    right: 0px; 
    height: 72px; 
    background-color: blue; 
} 
#leftcol { 
    position: absolute; 
    left: 0px; 
    top: 72px; 
    bottom: 0px; 
    width: 200px; 
    overflow: auto; 
    background-color: green; 
} 
#rightcol { 
    position: absolute; 
    top: 72px; 
    left: 200px; 
    right: 0px; 
    bottom: 0px; 
    overflow: auto; 
    background-color: purple; 
}

我成立了一个JSFiddle在浏览器中查看它：http://jsfiddle.net/hpsXg/

来源

2012-04-05 22:27:50 AndrewR

谢谢！我没有意识到我可以指定顶部和底部来完成这一点 – Craig 2012-04-06 13:37:41

在Chrome浏览器和IE浏览器中工作的表溢出，但不是Firefox

回答

相关问题