布尔玛全高度布局，中间有可滚动区域

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 div可滚动？我尝试添加overflow: auto;，但这不起作用

Answer 1

为height申请max-height或hero-body，然后应用overflow: auto;。可能是您可以隐藏overflow-x（overflow-x:hidden）并仅按overflow-y:auto垂直应用滚动。