我有一个基于flexBox的布局,我希望看起来像这样：
_______________
| top banner |
|---------------|
| tabular data |
| |
|_______________|
随着表格数据占据横幅之后可用的任何大小.
如果B是display：block,则无效,如果是display：table则不行(参见http://jsfiddle.net/E4Qbw/).
.container {
display: -webkit-flex;
-webkit-flex-flow: column nowrap;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border: 1px dashed #fc0;
}
.A {
-webkit-flex: 0 1 auto;
width: 100%;
border: 1px solid red;
}
.B {
width: 100%;
-webkit-flex: 1 0 auto;
border: 1px solid blue;
}
我还尝试将表包装在块容器内无济于事.
有没有办法用我目前的表来完成这个？或者我是否需要使用其他结构？
最佳答案
我设法通过将表包装到具有flex：1属性的div包装器中来实现.然后我设置高度：100％表.在这种情况下,需要tbody标签.
风格：
.container {
display: flex;
flex-direction: column;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border: 1px dashed #fc0;
}
.A {
border: 1px solid red;
}
.B-wrapper {
flex: 1;
overflow-y: auto;
border: 1px solid blue;
}
.B {
width: 100%;
height: 100%;
}
