表示テーブルを使用して 2 列のレイアウトを作成しようとしていますが、これを固定の高さ (ブラウザーの高さ) にし、「セル」をスクロールしてオーバーフローしたときにコンテンツを表示する方法がわかりません。
これは簡単にできると思っていたのですが、意外と難しいものです。
ご覧のとおり、.scroll <div>ほとんど何もしないスペシャルを追加しようとしました。
HTML
<div class="dashboard">
<div class="side panel">
<div class="scroll">
<div style="height: 400px">
asdfasdf
</div>
</div>
</div>
<div class="main panel">
<div style="height: 400px">
</div>
</div>
</div>
CSS
html, body, .dashboard {
position: absolute;
display: block;
top: 0; bottom: 0; height: 100%;
left: 0; right: 0; width: 100%;
}
.dashboard {
display: table;
}
.panel {
display: table-cell;
vertical-align: top;
}
.panel .scroll {
display: block;
overflow: auto;
}
.side.panel {
width: 200px;
}