CSS垂直表格布局

2023年9月16日 187次阅读

我有一个由这样的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不会增长但溢出是隐藏的.

有什么建议？

最佳答案 在您的请求中,您有溢出：隐藏,使布局更容易实现.你可以有这样的结构：

<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

点赞