129

フレックスボックスを使用したフルハイトアプリを使用したい。display: box;このリンクで古いフレックスボックスレイアウトモジュール（およびその他のもの）を使用して欲しいものを見つけました： CSS3フレックスボックスフルハイトアプリとオーバーフロー

これは、古いバージョンのフレックスボックスCSSプロパティのみをサポートするブラウザに適したソリューションです。

新しいフレックスボックスのプロパティを使用したい場合は、ハックとしてリストされている同じリンクの2番目のソリューションを使用してみます。コンテナを使用しheight: 0px;ます。縦スクロールを表示させます。

それは他の問題を引き起こし、解決策よりも回避策であるため、私はそれがあまり好きではありません。

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}
<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

基本例を使用してJSFiddleも準備しました：http：//jsfiddle.net/ch7n6/

これはフルハイトのHTMLWebサイトであり、コンテンツ要素のフレックスボックスプロパティのため、フッターは下部にあります。異なる高さをシミュレートするには、CSSコードと結果の間でバーを移動することをお勧めします。

4

3 に答える 3

272

私に答えを与えてくれたhttps://stackoverflow.com/users/1652962/cimmanonに感謝します。

解決策は、垂直方向のスクロール可能な要素に高さを設定することです。例えば：

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

最小の高さが必要でない限り、flexboxが要素を再計算するため、要素には高さがあります。これは、次とまったく同じであるために使用できます。height: 100px;min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

min-heightしたがって、垂直スクロールが必要な場合の最良の解決策は次のとおりです。

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

記事を表示するのに十分なスペースがない場合に備えて、完全な垂直スクロールが必要な場合：

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

最終的なコード：http：//jsfiddle.net/ch7n6/867/

于 2013-02-19T18:38:59.783 に答える
68

Flexboxスペックエディタはこちら。

これはフレックスボックスの推奨される使用法ですが、最良の動作のために微調整する必要があることがいくつかあります。

  • プレフィックスは使用しないでください。接頭辞のないフレックスボックスは、ほとんどのブラウザで十分にサポートされています。常にプレフィックスなしで開始し、それをサポートするために必要な場合にのみプレフィックスを追加します。

  • ヘッダーとフッターは屈曲することを意図していないため、両方をflex: none;設定する必要があります。現在、いくつかの重複する効果のために同様の動作がありますが、後で誤って混乱させたくない場合を除いて、それに依存するべきではありません。（デフォルトはflex:0 1 auto、であるため、自動高さから開始し、縮小することはできますが、拡大することはできませんが、overflow:visibleデフォルトでもあります。これにより、デフォルトがトリガーされmin-height:auto、縮小がまったく防止されます。を設定するoverflowと、動作がmin-height:auto変化します。 （min-contentではなくゼロに切り替えます）そして、それらは突然、非常に高い<article>要素によって押しつぶされます。）

  • あなたも単純化することができ<article> flexます-設定するだけflex: 1;で、あなたは行ってもいいでしょう。より複雑なことをする正当な理由がない限り、 https：//drafts.c​​sswg.org/css-flexbox/#flex-commonの一般的な値に固執するようにしてください-それらは読みやすく、ほとんどの動作をカバーしています呼び出したいと思うでしょう。

于 2015-12-18T19:31:59.193 に答える
21

現在の仕様では、次の点についてflex: 1 1 auto次のように述べています。

width/プロパティに基づいてアイテムのサイズを変更しますheightが、完全に柔軟にするため、主軸に沿った空きスペースを吸収します。すべてのアイテムが、、、またはのいずれかflex: autoである場合、アイテムのサイズが変更された後の正の空き領域は、。の付いたアイテムに均等に配分されます。flex: initialflex: noneflex: auto

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

要素の高さが100ピクセルであると言えば、絶対的なサイズではなく、「推奨される」サイズのように扱われるように思えます。収縮と成長が許可されているため、許可されている限り多くのスペースを占有します。そのため、この行を「メイン」要素に追加すると機能します:( height: 0またはその他の小さい数値）。

于 2013-02-19T18:50:18.120 に答える