Bulma 全高布局，中间有可滚动区域

Question

我想创建一个带有顶部导航栏、中间区域和页脚的全高布局。顶部导航和页脚应始终分别位于顶部和底部。我设法创建的布局有点像这样：

我通过以下方式实现了这个：

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

现在的问题是，当我在 hero-body 中有除 <dashboard/> 之外的其他元素（如一长串框）时，全高布局会丢失，从而使站点长于显示高度。如何使 hero-body div 可滚动？我尝试添加 overflow: auto; 但这不起作用

Answer 1

为hero-body 申请height 或max-height，然后申请overflow: auto;。可能你可以隐藏 overflow-x(overflow-x:hidden) 并仅通过overflow-y:auto 垂直应用滚动。