6

次のようにしたいフレックスボックスベースのレイアウトがあります。

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

<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 に答える