3

編集: Chrome 34 以降、以下の構成は期待どおりに正しくレンダリングされます。このことから、実際には以前の Chrome バージョンのバグであり、この比較的単純な CSS が単純に機能することがわかります。

そこで、ビューポートのパーセンテージの長さを発見したところ、フレックスボックスを使用した洗練されたレスポンシブ レイアウト テストでうまくいくと思いました。驚いたことに、Firefox と Internet Explorer はまったく同じように、まったく期待どおりにレンダリングしました。今回、Chrome は私が言うことをすることを拒否します。

そして私が欲しいのは、スクロールバーがなく、すべてのdiv要素が親に応じてサイズが変わることheight: 100%、コンテンツがなくてもボックスレイアウトが見えること、ブロックレベルのコンテンツをレイアウトに挿入することです。

原因を具体的に言うと、継承されていないように見えるのは親要素の高さです。この場合、height: 100%内部要素が親要素の高さになることを期待していますが、それ自体は70vh(ビューポートの高さの 70% に等しい)。

内部に何もない場合div、Chrome は (FF/IE とは異なり) 要素をまったく表示しません (高さが空ではない) ブロック要素がまったくないかのように。

教えてください：

  • 文書化されていない Chrome のバグですか (または、Webkit に追加のプロパティが必要ですか)?
  • バグでない場合: FF と IE がこのように動作する理由 (一見正しい) は何ですか?
  • 問題flex-direction: columnになる可能性がありますか (要素フローの変更)?

やっぱり使えるって書いてあるし。


コードは次のとおりです。http://jsfiddle.net/ZPRdh/

レンダリングは次のとおりです。

ブラウザでのレンダリング

編集

flex-boxこの問題では無関係のようです。次の HTML ページはレイアウトの考え方を再現しており、IE と FF で同じようにレンダリングされますが、Chrome ではレンダリングされません。

<!DOCTYPE html>
<html>
    <head>
        <title>stackoverflow.com/questions/19450503/</title>
        <style type="text/css">
            body{background-color:#000;margin:0;font:normal 4em sans-serif;color:#888;}
            header,section,footer{overflow:hidden;}
            header,section,footer,article,figure{display:block;margin:0;padding:0;}
            header {background-color:#333;height:20vh;}
            section{background-color:#555;height:70vh;}
            footer {background-color:#777;height:10vh;}
            article{background-color:#999;width:20vmin;height:20vmin;}
            figure {background-color:#BBB;width:50%;height:50%;}
        </style>
    </head>
    <body>
        <header></header>
        <section>
            <article>
                <figure></figure>
            </article>
        </section>
        <footer></footer>
    </body>
</html>

ここで私 (および他の人) が基本的なことを理解していないか、Chrome に実際に意図しない矛盾があります。

4

1 に答える 1

3

これがバグなのか機能なのかはわかりませんが、Chrome (および Opera は Presto を使用) は、要素の実際のサイズ (列方向の高さ、行方向の幅) と同じ方法で主軸に沿った長さを処理しません。オリエンテーション）。これが、パーセンテージが期待どおりに機能しない理由です。中央の要素の高さは、4 行のテキストを含めるのに十分な大きさとして扱われます。

フレックスアイテムを埋めるために子が必要な場合は、それをフレックスコンテナに昇格させる必要があります（ただし、これはあなたの場合にはうまくいきません）。

http://jsfiddle.net/ZPRdh/3/

.b {
    height:70vh;
    background-color:#555;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.b>div:nth-child(1) {
    width:50%;
    height:30%;
    flex: 30%;
    background-color:#AAA;
}
.b>div:nth-child(2) {
    width:40%;
    height:40%;
    flex: 40%;
    background-color:#CCC;
}
.b>div:nth-child(3) {
    width:30%;
    height:30%;
    flex: 30%;
    background-color:#EEE;
}
于 2013-10-21T12:50:29.533 に答える