web-dev-qa-db-ja.com

中央にスクロール可能なエリアがあるブルマのフルハイトレイアウト

上部のナビゲーションバー、中央の領域、およびフッターでフルハイトのレイアウトを作成したいと考えています。トップナビゲーションとフッターは常にそれぞれ上部と下部に留まる必要があります。作成したレイアウトは、次のようになります。

Dashboard Layout

私はこれを実装しました：

<section class="hero is-fullheight">
        <div class="hero-head">
            <the-navbar></the-navbar>
        </div>
        <div class="hero-body">
            <div class="container">
                <dashboard/>
            </div>
        </div>

        <div class="hero-foot">
            <tab-navigation></tab-navigation>
        </div>
</section>

問題は、ヒーローボディに<dashboard/>以外の要素（長いボックスのリストなど）がある場合、フルハイトのレイアウトが失われ、サイトがディスプレイの高さよりも長くなることです。ヒーローボディのdivをスクロール可能にするにはどうすればよいですか？ overflow: auto;を追加しようとしましたが、うまくいきません

cssbulma
3
Alex Gogl

max-heightにheightまたはhero-bodyを適用してから、overflow: auto;を適用します。オーバーフロー-x（overflow-x:hidden）を非表示にして、overflow-y:autoだけ垂直方向にスクロールを適用できる場合があります。

2
Pons Purushothaman