セルの 1 つをスクロールする DIV を使用してテーブル レイアウトを作成しました。これを実現するために、overflow:auto と height:100% を使用しました。Chrome と Safari では動作しますが、IE9 では動作しません。IE9では、セルの高さを拡張するだけで、ページ全体をスクロールできますが、それはすべきことではありません.
これを解決する方法についてのアイデアはありますか?
(注: SidePanel クラスの height:100% スタイルに絞り込みました。実際のピクセル値を使用すると、セルは適切にスクロールします。たとえば、height:500px です。 - IE9 と FF の両方に問題があるようです。 height:100% と overflow:auto でレンダリングします。)
<!DOCTYPE html>
<html>
<head>
<style>
* { /* Resetting the defaults */
margin: 0;
padding: 0;
}
html, body { /* Assigning Height To Containers First */
height: 100%;
}
.headerRow
{
height:50px;
}
.fullHeight
{
height:100%;
}
.sidePanel
{
overflow:auto;
height:100%;
}
.div-table{
display:table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
}
.div-table-col{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>
</head>
<body style="background-color:White;overflow:auto">
<div id="mainTable" class="div-table fullHeight">
<div class="div-table-row headerRow">
<div class="div-table-col">
My Header Is Here
</div>
</div>
<div class="div-table-row">
<div class="div-table-col">
Image here
</div>
<div class="div-table-col sidePanel">
td 2 content <br>too <br>tall <br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>to fit height of the screen,
so a scroll bar is added. In IE9 it doesn't work because it just extends
the height of the DIV
</div>
</div>
</div>
</body>
</html>
スクリーンショットは次のとおりです。