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.

垂直应用滚动

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

Bulma fullheight layout with scrollable area in middle

css

bulma