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

SCSS:http: //jsfiddle.net/JamesKyle/j7U5E/

CSS:http: //jsfiddle.net/JamesKyle/fScW3/

4

1 回答 1

1

使用overflow-y: scroll;而不是使用overflow: auto;,因为overflow: auto;会增加 div 的高度,但不会使其滚动里面的内容......

我的小提琴

于 2012-10-03T17:47:37.950 回答