html - CSS : Clamp divs to top and bottom in an inline container

Question

[已解决]

Here's the Fiddle

<div id="container">
    <div class="content">
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
        <div class="column">
            <div class="top">
                TOP
            </div>
            <div class="bottom">
                BOTTOM
            </div>
        </div>
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </div>
</div>

#container .content .column {
    position: relative;
    display:inline-block;
    height: 100%;
    width: 100px;
    border: 1px solid red;
}

#container .content .top,
#container .content .bottom {
   position: absolute;
   background-color: #AAA;
}

#container .content .top {
   top: 0;
}

#container .content .bottom {
   bottom: 0;
}

#container {
    min-height: 349px;
}

我有三个内联列，左右列具有相同的动态高度(它们包含生成的表格，行数可变)我希望中间的列与其相邻的列具有相同的高度，并且我希望他的 TOP div 固定在顶部，而 BOTTOM div 固定在底部。

我读过 this thread但无法让它发挥作用。

知道我做错了什么吗？

非常感谢!

编辑使用 Sowmya 的解决方案: JS Fiddle

<div id="container">
    <div style="position: relative;">
    <div class="content">
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
        <div class="column">
            <div class="top">
                TOP
            </div>
            <div class="bottom">
                BOTTOM
            </div>
        </div>
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </div>
    </div>
</div>

#container .content .column {
    display:table-cell;
    height: 100%;
    width: 100px;
    border: 1px solid red;
    vertical-align: top;
}

#container .content .top,
#container .content .bottom {
   position: absolute;
   background-color: #AAA;
}

#container .content .top {
   top: 0;
}

#container .content .bottom {
   bottom: 0;
}

Answer 1

使用display:table-cell;到.column

#container .content .column {
    position: relative;
    display:table-cell;
    height: 100%;
    width: 100px;
    border: 1px solid red;
}

DEMO