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>

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

Answer 1

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