CSS：卡箍div的頂部和底部內嵌容器

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可以夾到頂部和底部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