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

CSS垂直表格布局

1 个答案: