Table cell scrolling

by Nesvet

HTML

<div id="table">
    <div id="cell">
        <div id="wrap">
            <div id="wrap2">
                <div id="top"></div>
                <div id="bottom"></div>
            </div>
        </div>
    </div>
    <div id="cell2"></div>
</div>

CSS

html, body {height: 100%}
#table {display: table; width: 100%; height: 100%}

#cell {
    display: table-cell;
}

#wrap {
    border: 2px solid green;
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

#top {
    border: 2px solid blue;
    height: 200px;
    margin-bottom: 100px;
}

#bottom {
    border: 2px solid red;
    height: 100px;
    position: absolute;
    width: 100%;
    bottom: 0;
}

#cell2 {
    display: table-cell;
    width: 100px;
    border: 1px solid yellow;
}