在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

回答

相關問題