CSS垂直表布局

Question

我有这样做的div表：

<div class="table"> 
    <div class="tRow A"> 
     <div class="tCell"> 
      Test 
     </div> 
    </div> 
    <div class="tRow B"> 
     <div class="tCell"> 
      <!-- content here --> 
     </div> 
    </div> 
    <div class="tRow C"> 
     <div class="tCell"> 
      Test 
     </div> 
    </div> 
</div> 

与下面的CSS：

body, html{ 
    height: 100%; 
} 

.table{ 
    display: table; 
    height: 100%; 
    max-height: 100%; 
    width: 200px; 
    table-layout: fixed; 
} 

.tRow{ 
    display: table-row; 
} 

.tCell{ 
    display: table-cell; 
} 

.B { 
    background: yellow; 
} 

.B .tCell{ 
    overflow: hidden; 
} 

.C{ 
    height: 50px; 
    background: green; 
} 

http://jsfiddle.net/HtA43/

现在我需要（我不是能够得到这个工作）是，该表格呈现100％的高度。 rowA高达其内容rowC底部固定高度。并且rowB应该填充剩下的空间。

目前为止，但当rowB的内容超过其大小时，单元格和表格随之增长。我需要的是rowB不会增长，但溢出隐藏。

有什么建议吗？

Answer 1

根据您的要求，您有overflow:hidden，这使得布局更容易实现。你可以有一个这样的结构：

<div class="container"> 
<div class="A"> 
     Test 
</div> 
<div class="B"> 
    Test.... 
</div> 
<div class="C"> 
     Test 
</div> 
</div> 

然后短短风格：

.container{ 
    height: 100%; 
    width: 200px; 
    position:relative; 
    overflow:hidden; 
} 
.B { 
    min-height:100%; 
} 
.C{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height: 50px; 
} 

入住这Demo Fiddle