クロムとIEではテーブルオーバーフローが発生しますが、Firefoxでは動作しません。

私はいつも画面全体を占有するレイアウトを取得しようとしています。レイアウトには、ヘッダー行、200ピクセル幅の左バー（スクロール可能）、スクロール可能なコンテンツ領域があります。クロムと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

最初：テーブルを使用してレイアウトを作ることはありませんが、それらは表形式データだけのために設計されています。 –

はい。私はMatt K.（+1） –

に同意します。それはtd上でFFが 'height：100％;'をどのように扱うかと関係していると思います。私がこの値を変更すると、スクロールバーが表示されます。そこから始めることができます！ –

これは、絶対配置のための完全な使用例です。

HTMLはできるだけシンプルにしてください。

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

絶対配置とオーバーフローを設定するCSS：列の自動設定。私は、ブラウザで表示するJSFiddleを設定

* { 
    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; 
}

：私は気付かhttp://jsfiddle.net/hpsXg/

出典

2012-04-05 22:27:50 AndrewR

ありがとうございました！私はこれを達成するためにトップとボトムを指定できるとは気付かなかった – Craig

クロムとIEではテーブルオーバーフローが発生しますが、Firefoxでは動作しません。

答えて

関連する問題