3行、100％の高さフレキシボックスのレイアウトアンドロイド

Question

では動作しません見てみてください。

https://jsfiddle.net/sgtooLnb/1/

ので、基本的にフレキシボックスの列レイアウトと、このようなHTML構造（私はいくつかのより多くのコードを追加する必要があります）：

<header>The header content goes here.</header> 
<div class="content">The main content goes here.</div> 
<footer>The footer content goes here.</footer> 

アンドロイド（4.4.2）では、このようなレイアウトは動作していないようです。フッターは常に下部に貼り付けられ、オーバーフローするコンテンツはフッターの下になります。

悲しいことに、あなたはjsfiddleからこの動作を見ることはできませんが、以前は同じ問題を抱えていた人がいたかもしれません。

Answer 1

[OK]を得るだろうと考えているスタイル

body > * { 
    display: flex; 
} 

を追加する場合は、より良いindagating thisとthisで私は、問題は、Androidには影響に言及されていない場合でもthisであることが判明しましたブラウザの一覧。 0コンテンツへ：：だから、私の解決策は、フレックス収縮を追加しました

body{ 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.main-content{ 
    flex: 1 0 auto; // flex-shrink:0 > android 4.4.2 fix (and some other browsers too) 
} 

これは、ヘッダーとフッターするフレックスプロパティのいくつかの種類を割り当てるためにも良いことです。

.main-header, 
.main-footer{ 
    flex: none; // or flex something. 
} 

はまた、私はAutoprefixerを使っていることに注意してください。私は、そうでない場合は、BG色が消えていたことをアンドロイド442に気づきました。

.main-content{ 
    flex-grow: 1; 
    flex-shrink:0; 
    flex-basis:auto; 
} 

最後に、このスレッドをdownvoted 1に：あなたはjsfiddleに関連するコードを持っていたそうでなければ、あなたはメイン・コンテンツへのショートカット（IEたわごとフィックス）を使用しないでください。また、あなたが本当に主題を知っていれば、コードは必要ありませんでした。そして、あなたがその主題を知らなかったら、あなたは何かを落とすべきではありません。 もう一度downvoteしてください、この資料は誰にも役立ちません。これは主なスタックオーバーフローのターゲットですか？

Answer 2

フレックス要素の子要素（body）もdisplay: flexである必要があります。あなたは私はあなたが希望する結果