Bulma fullheight layout with scrollable area in middle

Question

I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:

I implemented this with:

<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>

The problem now is that when I have other elements than the <dashboard/> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding overflow: auto; but that doesn't work

Iasis

Answer 1

Apply height or max-height for hero-body and then apply overflow: auto;. May be you can hide overflow-x(overflow-x:hidden) and apply scroll only vertically by overflow-y:auto.

Tomtit