使用Bulma如何让hero-body可滚动，同时固定顶部导航与底部页脚？

针对你用Bulma的is-fullheight Hero组件时页脚被推出可视区域的问题，这里提供两种实用方案，结合Bulma特性和CSS技巧就能搞定：

方案一：改造Hero组件实现需求 #

利用Flex布局调整Hero的内部结构，让hero-body成为可滚动容器，同时固定导航和页脚：

HTML结构 #

<div class="hero is-fullheight">
  <!-- 顶部固定导航 -->
  <div class="hero-head">
    <nav class="navbar is-fixed-top" style="background: white;">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item" href="#">我的站点</a>
        </div>
      </div>
    </nav>
  </div>

  <!-- 可滚动的主体内容区 -->
  <div class="hero-body scrollable-body">
    <div class="container">
      <!-- 这里放入你的长内容 -->
      <p>大量内容示例...</p>
      <p>大量内容示例...</p>
      <!-- 重复足够多的内容测试滚动 -->
    </div>
  </div>

  <!-- 底部固定页脚 -->
  <div class="hero-footer">
    <footer class="footer is-fixed-bottom" style="background: white;">
      <div class="container">
        <p>© 2024 我的站点</p>
      </div>
    </footer>
  </div>
</div>

自定义CSS #

/* 让Hero容器始终占满视口，并用Flex垂直排列子元素 */
.hero.is-fullheight {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 让主体内容区自动填充剩余空间，溢出时滚动 */
.scrollable-body {
  flex: 1;
  overflow-y: auto;
  /* 避开顶部导航的高度，防止内容被遮挡 */
  padding-top: 3.25rem;
}

/* 固定页脚在底部，不被内容撑开 */
.hero-footer {
  flex-shrink: 0;
}

/* 确保导航和页脚层级高于内容 */
.navbar.is-fixed-top, .footer.is-fixed-bottom {
  z-index: 100;
}

方案二：纯Flex容器方案（更简洁） #

如果觉得Hero组件限制太多，可以直接用一个全局Flex容器包裹页面，逻辑更清晰：

HTML结构 #

<div class="page-wrapper">
  <!-- 顶部导航 -->
  <nav class="navbar" style="background: white;">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">我的站点</a>
      </div>
    </div>
  </nav>

  <!-- 可滚动内容区 -->
  <main class="page-content">
    <div class="container">
      <!-- 长内容 -->
      <p>大量内容示例...</p>
    </div>
  </main>

  <!-- 底部页脚 -->
  <footer class="footer" style="background: white;">
    <div class="container">
      <p>© 2024 我的站点</p>
    </div>
  </footer>
</div>

自定义CSS #

/* 全局容器占满视口，Flex垂直排列 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 导航固定在顶部 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 内容区占满剩余空间，溢出滚动 */
.page-content {
  flex: 1;
  overflow-y: auto;
  /* 避开导航和页脚的高度 */
  padding-top: 3.25rem;
  padding-bottom: 3rem;
}

/* 页脚固定在底部 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

关键注意事项 #

• 给固定的导航和页脚设置背景色，避免滚动内容穿透显示
• 内容区的padding-top和padding-bottom要对应导航、页脚的实际高度（Bulma默认navbar高度是3.25rem）
• 用z-index确保导航和页脚始终在内容上方

内容的提问来源于stack exchange，提问作者redcurry