☰

フルハイトアプリでフレックスボックスと垂直スクロールを組み合わせるにはどうすればいいですか? 質問する

tag-icon • tag-icon html css flexbox
フルハイトアプリでフレックスボックスと垂直スクロールを組み合わせるにはどうすればいいですか? 質問する

flexbox を使用してフルハイト アプリを使用したいと考えています。display: box;このリンクで、古い flexbox レイアウト モジュール (およびその他のもの) を使用して必要なものを見つけました。CSS3 Flexbox フルハイトアプリとオーバーフロー

これは、flexbox 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/

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

ベストアンサー1

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

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

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

要素意思高さはフレックスボックスによって再計算されるため、最小高さつまり、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/

おすすめ記事