html - 没有绝对位置的可滚动 div

Question

有什么方法可以做成这样:http://jsfiddle.net/wwr2ny27/ , 但没有左右面板的绝对位置？我想让它们可滚动，但没有绝对位置。

HTML:

<div id="header">Header</div>

<div id="left">
    <p>left</p>
    <p>left</p>
    ...
</div>

<div id="right">
    <p>right</p>
    <p>right</p>
    ...
</div>

CSS:

#header {
    background-color: silver;
    height: 30px;
}
#left, #right {
    position: absolute;
    top: 30px;
    bottom: 0px;
    overflow: auto;
    width: 50%;
}
#left {
    background-color: yellow;
    left: 0px;
}
#right {
    background-color: orange;
    right: 0px;
}

Answer 1

也许你可以看看这个 fiddle :http://jsfiddle.net/14wnj9x2/

所以，我已经删除了绝对位置，并且完全基于高度的代码，这确保了溢出的发生。

html, body {
    margin: 0px;
    overflow:hidden;
    height:100%;
}

#left, #right {
    float:left;
    height: 95%;
    overflow: auto;
    width: 50%;
}