首页 > 营销学院 > 技术知识

使用Bulma构建固定页眉页脚与可滚动内容区域的布局

本文详细阐述如何在bulma框架下实现固定在页面顶部和底部的导航栏与页脚，同时确保中间内容区域可独立滚动。通过利用bulma提供的`is-fixed-top`和`is-fixed-bottom`类，并配合`has-n*bar-fixed-top`和`has-n*bar-fixed-bottom`等辅助类，可以有效解决传统`hero`组件在内容过长时页脚被推出视口的问题，从而创建出具有良好用户体验的响应式布局。

在现代网页设计中，保持页面的导航栏（页眉）和页脚始终可见，同时允许主体内容区域独立滚动，是一种常见的用户体验需求。这确保了用户无论内容多长，都能方便地访问导航和版权信息。然而，在使用像Bulma这样的CSS框架时，如果不了解其特定机制，可能会遇到一些挑战，例如当内容区域过长时，页脚被推出视口的问题。

传统hero组件的局限性

许多开发者尝试使用Bulma的hero组件配合is-fullheight类来构建全屏布局，并希望其子元素hero-head、hero-body和hero-footer能够实现固定页眉页脚和可滚动内容的效果。然而，hero组件的is-fullheight特性旨在使其占据整个视口高度，而hero-body会根据内容扩展。当hero-body的内容超出视口高度时，hero-footer就会被推到视口之外，导致其无法固定显示。

要解决这个问题，我们需要采用Bulma提供的固定定位（Fixed Positioning）机制，而不是依赖hero组件来管理整个页面的布局。

实现固定页眉（导航栏）

Bulma为导航栏提供了方便的固定定位类。通过将is-fixed-top类应用于n*bar组件，可以使其始终固定在视口顶部。

步骤：

添加固定导航栏类： 在你的

<n* class="n*bar is-fixed-top" role="n*igation" aria-label="main n*igation">
  <div class="n*bar-brand">
    <a class="n*bar-item" href="https://bulma.io">
      @@##@@
    </a>
    <a role="button" class="n*bar-burger" aria-label="menu" aria-expanded="false" data-target="n*barBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="n*barBasicExample" class="n*bar-menu">
    <div class="n*bar-start">
      <a class="n*bar-item">
        Home
      </a>
      <a class="n*bar-item">
        Documentation
      </a>
    </div>
    <div class="n*bar-end">
      <div class="n*bar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</n*>

处理内容重叠问题： 当导航栏固定在顶部时，它会脱离文档流，导致其下方的页面内容向上移动并可能被导航栏遮挡。为了解决这个问题，Bulma提供了has-n*bar-fixed-top类，该类会给html>或

元素添加适当的顶部内边距（padding），以确保内容不会被遮挡。

<html class="has-n*bar-fixed-top">
<!-- 或 <body class="has-n*bar-fixed-top"> -->
&lt;body>
    <!-- 你的固定导航栏 -->
    <n* class="n*bar is-fixed-top">...</n*>
    <!-- 页面主要内容 -->
    <section class="section">
        <div class="container">
            <h1 class="title">我的可滚动内容</h1>
            <!-- 大量内容以确保滚动 -->
        </div>
    </section>
    <!-- 你的固定页脚 -->
    <footer class="footer is-fixed-bottom">...</footer>
</body>
</html>

实现固定页脚

与固定页眉类似，Bulma也提供了is-fixed-bottom类来固定元素到视口底部。通常，我们会将一个footer元素（或一个样式为页脚的n*bar）固定在底部。

BlessAI

Bless AI 提供五个独特的功能：每日问候、庆祝问候、祝福、祷告和名言的文本生成和图片生成。

135 查看详情 BlessAI

步骤：

添加固定页脚类： 在你的

<footer class="footer is-fixed-bottom">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma Fixed Footer</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
    </p>
  </div>
</footer>

处理内容重叠问题： 同样地，固定页脚也会脱离文档流。Bulma提供了has-n*bar-fixed-bottom类来为或
元素添加底部内边距，以防止主要内容被页脚遮挡。
```
<html class="has-n*bar-fixed-top has-n*bar-fixed-bottom">

<body>
    
</body>
</html>
```
请注意，如果同时使用固定顶部导航栏和固定底部页脚，你需要同时添加has-n*bar-fixed-top和has-n*bar-fixed-bottom类。

整合与可滚动内容区域

通过上述步骤，你的导航栏和页脚将始终固定在视口顶部和底部。页面的主要内容区域（例如一个

或）将自动占据两者之间的空间。当这个主要内容区域的内容超出其可用高度时，浏览器会自动为其生成滚动条，实现你所需的可滚动效果。

完整示例结构：

<!DOCTYPE html>
<html class="has-n*bar-fixed-top has-n*bar-fixed-bottom">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bulma固定页眉页脚与可滚动内容</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
        /* 示例样式，确保内容足够长以触发滚动 */
        .long-content {
            height: 150vh; /* 使内容高度远超视口，以便观察滚动效果 */
            background-color: #f5f5f5;
            padding: 2rem;
        }
    </style>
</head>
<body>

    <!-- 固定顶部导航栏 -->
    <n* class="n*bar is-fixed-top" role="n*igation" aria-label="main n*igation">
      <div class="n*bar-brand">
        <a class="n*bar-item" href="#">
          @@##@@
        </a>
        <a role="button" class="n*bar-burger" aria-label="menu" aria-expanded="false" data-target="n*barExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div id="n*barExample" class="n*bar-menu">
        <div class="n*bar-start">
          <a class="n*bar-item">
            主页
          </a>
          <a class="n*bar-item">
            关于我们
          </a>
        </div>
      </div>
    </n*>

    <!-- 可滚动的主要内容区域 -->
    <main class="section">
        <div class="container">
            <h1 class="title">欢迎来到我的网站！</h1>
            <p class="subtitle">这是一个带有固定页眉和页脚的页面。</p>

            <div class="content long-content">
                <p>
                    这里是页面的主要内容。当这些内容足够长时，您会发现只有这个区域可以滚动，而顶部的导航栏和底部的页脚始终保持可见。
                    这种布局对于需要展示大量信息，同时又希望用户能够随时访问重要导航链接和版权信息的网站非常有用。
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Curabitur pretium tincidunt lacus, ac venenatis enim semper sit amet. Proin sit amet purus eu velit lacinia facilisis. Mauris sed odio in massa posuere tristique. Donec nec metus id felis ullamcorper efficitur. Sed sit amet nisl id enim tincidunt ultrices. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus in arcu sit amet purus.
                </p>
                <!-- 重复内容以确保滚动 -->
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Curabitur pretium tincidunt lacus, ac venenatis enim semper sit amet. Proin sit amet purus eu velit lacinia facilisis. Mauris sed odio in massa posuere tristique. Donec nec metus id felis ullamcorper efficitur. Sed sit amet nisl id enim tincidunt ultrices. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus in arcu sit amet purus.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Curabitur pretium tincidunt lacus, ac venenatis enim semper sit amet. Proin sit amet purus eu velit lacinia facilisis. Mauris sed odio in massa posuere tristique. Donec nec metus id felis ullamcorper efficitur. Sed sit amet nisl id enim tincidunt ultrices. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus in arcu sit amet purus.
                </p>
            </div>
        </div>
    </main>

    <!-- 固定底部页脚 -->
    <footer class="footer is-fixed-bottom">
      <div class="content has-text-centered">
        <p>
          <strong>Bulma固定页脚示例</strong>. 版权所有 &copy; 2025.
        </p>
      </div>
    </footer>

</body>
</html>

注意事项与总结

Bulma版本兼容性： 确保你使用的Bulma版本支持is-fixed-top、is-fixed-bottom以及对应的has-n*bar-fixed-top和has-n*bar-fixed-bottom类。这些是Bulma的核心功能，通常在所有现代版本中都可用。

自定义样式： 如果Bulma提供的默认间距不完全符合你的设计，你可以通过自定义CSS覆盖html或body上的padding-top和padding-bottom值。例如：

html.has-n*bar-fixed-top {
    padding-top: 52px; /* 根据你的导航栏实际高度调整 */
}
html.has-n*bar-fixed-bottom {
    padding-bottom: 52px; /* 根据你的页脚实际高度调整 */
}

Z-index： 固定定位的元素默认具有较高的堆叠顺序。如果遇到其他元素遮挡固定导航栏或页脚的问题，可能需要手动调整它们的z-index值。
响应式设计： 确保在不同屏幕尺寸下，固定元素和可滚动内容的布局依然表现良好。Bulma的n*bar组件本身是响应式的，但你可能需要对内容区域进行额外的媒体查询调整。

通过采用Bulma的固定定位类，我们可以轻松实现具有固定页眉、页脚和可滚动内容区域的复杂布局，从而提升用户界面的可用性和专业性。这种方法比尝试强制hero-body滚动更为健壮和符合框架设计哲学。

以上就是使用Bulma构建固定页眉页脚与可滚动内容区域的布局的详细内容，更多请关注php中文网其它相关文章！

# 吴中抖音seo排名费用 # 以确保 # 对话框 # 解决这个问题 # 如何实现 # 如何更改 # 设计教程 # 广东seo营销网站 # 安阳整站seo关键词排名代理 # 使其 # 端午营销推广视频大全集 # 优秀设计产品网站推广 # 小额贷款网站优化策划 # 建瓯网络seo大概费用 # 朗玛网络营销推广 # 清远网站关键词优化软件 # 外贸电商网站建设真实性 # css # 自定义 # 主要内容 # css框 # .net # 响应式设计 # 响应式布局 # 网页设计 # cdn # ai # 浏览器 # npm # go # js # html # php

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-12-09

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。