6

我有一个基于 flexbox 的布局，我希望看起来像这样：

 _______________
| top banner    |
|---------------|
| tabular data  |
|               |
|_______________|

表格数据占据横幅后可用的任何大小。

如果是，这有效，但如果B是，则无效（请参阅http://jsfiddle.net/E4Qbw/）。display: blockdisplay: table

.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;
}

<div class="container">
    <div class="A">
           A
    </div>
    <table class="B">   
        <thead>
            <tr><th>B</th></tr>
        </thead>     
    </table>
</div>

我还尝试将桌子包装在block容器内，但无济于事。

有什么办法可以用我当前的表来完成这个吗？还是我需要使用其他结构？

4

2 回答 2

3

这个问题也让我困惑了一阵子：“你如何让 Flexbox 内部的事情再次变得理性？”。

我的解决方案是使用

"position: absolute; top:0; bottom:0; left:0; right:0;"

这是我更新的小提琴：http: //jsfiddle.net/E4Qbw/10/。可能会有帮助。

我也认为这是 Flexbox 的一个主要问题。希望有更深入专业知识的人可以在这里帮助我们。

顺便说一句：我无法使用 THEAD 让它工作，所以 Fiddle 现在有一个 TBODY。

于 2014-07-25T13:10:48.983 回答
2

我设法通过将属性包装table到div包装器中来做到这一点。flex: 1然后我安排height: 100%了一张桌子。在这种情况下，tbody标签是必需的。

<div class="container">
  <div class="A">
       A
  </div>
  <div class="B-wrapper">
    <table class="B">   
        <thead>
            <tr><th>Header</th></tr>
        </thead>
        <tbody>
            <tr><td>Row</td></tr>
            <tr><td>Row</td></tr>
        </tbody>
    </table>
  </div>
</div>

款式：

.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%;
}

这是我的小提琴：http: //jsfiddle.net/ischenkodv/E4Qbw/58/

于 2017-01-03T19:52:03.500 回答