我正在尝试使用显示表进行两列布局,但是我无法弄清楚如何将其设为固定高度(浏览器的高度)并让“单元格”在溢出时滚动以显示内容。
我认为这将是一件简单的事情,但它却出人意料地困难。
正如你所看到的,我什至尝试添加一个.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;
}