运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

Bulma固定导航栏与页脚：实现可滚动内容区域的专业指南

Bulma固定导航栏与页脚：实现可滚动内容区域的专业指南

本文详细介绍了如何在bulma框架中实现固定顶部导航栏和底部页脚，同时确保页面主体内容可独立滚动。通过利用bulma提供的`is-fixed-top`和`is-fixed-bottom`类，以及相应的html根元素类如`has-n*bar-fixed-top`和`has-n*bar-fixed-bottom`，开发者可以轻松构建出用户体验友好的固定式布局，避免内容溢出导致页脚被推出视口的问题。

在现代Web应用设计中，固定（sticky）的导航栏和页脚是常见的UI模式，它们能确保用户无论滚动到页面何处，都能方便地访问关键功能或信息。然而，当页面主体内容较长时，如何实现主体内容的可滚动性，同时保持顶部和底部元素的固定，是一个需要技巧的问题。本文将深入探讨如何在流行的CSS框架Bulma中优雅地解决这一挑战。

理解固定布局的需求

通常，我们希望实现以下布局：

  • 顶部导航栏：始终停留在视口顶部。
  • 底部页脚：始终停留在视口底部。
  • 中间内容区域：当内容溢出时，该区域自身可滚动，而导航栏和页脚保持不动。

直接使用如Bulma的hero组件配合is-fullheight可能无法直接满足这一需求。hero组件旨在创建一个占据整个视口高度的区块，其内部的hero-body会填充剩余空间。但如果hero-body的内容过长，它会推动hero-footer超出视口，这与我们希望页脚始终可见的目标相悖。正确的解决方案是利用Bulma提供的固定组件类。

实现固定顶部导航栏

Bulma为导航栏提供了内置的固定功能。要将导航栏固定在页面顶部，你需要做两件事：

  1. 为导航栏添加固定类：在n*元素上添加is-fixed-top类。
  2. 调整HTML根元素：为了避免固定导航栏覆盖页面顶部内容，需要在或元素上添加has-n*bar-fixed-top类。这个类会为页面顶部添加一个与导航栏高度相等的内边距（padding），从而将页面内容向下推，确保其在导航栏下方可见。

示例代码：

<!DOCTYPE html>
<html class="has-n*bar-fixed-top">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>固定顶部导航栏示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
        /* 仅为示例内容添加高度，以便演示滚动 */
        .content-section {
            padding: 20px;
            min-height: 150vh; /* 确保内容足够长以触发滚动 */
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <!-- 固定顶部导航栏 -->
    <n* class="n*bar is-fixed-top is-primary" 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*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">主页</a>
                <a class="n*bar-item">关于我们</a>
            </div>
            <div class="n*bar-end">
                <div class="n*bar-item">
                    <div class="buttons">
                        <a class="button is-light">登录</a>
                    </div>
                </div>
            </div>
        </div>
    </n*>

    <!-- 页面主体内容 -->
    <section class="section content-section">
        <div class="container">
            <h1 class="title">欢迎来到我的网站</h1>
            <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>... (重复大量内容以填充页面)</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/750">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6dbdc6793f822.png" alt="Ghostwriter">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/750">Ghostwriter</a>
                            <p>Replit推出的AI编程助手，一个强大的IDE，编译器和解释器。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Ghostwriter">
                                <span>238</span>
                            </div>
                        </div>
                        <a href="/ai/750" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Ghostwriter">
                        </a>
                    </div>
                
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>这是页面内容的末尾，上面有很多内容，您可以滚动查看。</p>
        </div>
    </section>

    <script>
        // 激活 Bulma 导航栏的汉堡菜单（如果需要）
        document.addEventListener('DOMContentLoaded', () => {
            const $n*barBurgers = Array.prototype.slice.call(document.querySelectorAll('.n*bar-burger'), 0);
            if ($n*barBurgers.length > 0) {
                $n*barBurgers.forEach( el => {
                    el.addEventListener('click', () => {
                        const target = el.dataset.target;
                        const $target = document.getElementById(target);
                        el.classList.toggle('is-active');
                        $target.classList.toggle('is-active');
                    });
                });
            }
        });
    </script>
</body>
</html>

实现固定底部页脚

与固定顶部导航栏类似，Bulma也支持将元素固定在页面底部。虽然Bulma的文档主要围绕n*bar组件来讲解固定功能，但is-fixed-bottom类可以应用于任何你希望固定在底部的元素。通常，我们会用一个footer元素或另一个n*元素来充当页脚。

  1. 为页脚元素添加固定类：在footer或充当页脚的n*元素上添加is-fixed-bottom类。
  2. 调整HTML根元素：为了避免固定页脚覆盖页面底部内容，需要在或元素上添加has-n*bar-fixed-bottom类。这个类会为页面底部添加一个与页脚高度相等的内边距，确保内容不会被页脚遮挡。

示例代码：

<!DOCTYPE html>
<html class="has-n*bar-fixed-bottom">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>固定底部页脚示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
        /* 仅为示例内容添加高度，以便演示滚动 */
        .content-section {
            padding: 20px;
            min-height: 150vh; /* 确保内容足够长以触发滚动 */
            background-color: #f5f5f5;
        }
        .fixed-footer {
            height: 52px; /* 模拟页脚高度，Bulma的n*bar默认高度 */
            line-height: 52px;
            text-align: center;
            color: white;
            background-color: #363636;
        }
    </style>
</head>
<body>
    <!-- 页面主体内容 -->
    <section class="section content-section">
        <div class="container">
            <h1 class="title">欢迎来到我的网站</h1>
            <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>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>这是页面内容的末尾，上面有很多内容，您可以滚动查看。</p>
        </div>
    </section>

    <!-- 固定底部页脚 -->
    <footer class="n*bar is-fixed-bottom fixed-footer">
        <div class="container">
            <p>&copy; 2025 我的公司. 保留所有权利。</p>
        </div>
    </footer>
</body>
</html>

结合固定顶部导航栏和底部页脚

要同时拥有固定顶部导航栏和固定底部页脚，并使中间内容区域可滚动，你需要将上述两种方法结合起来。

  1. 顶部导航栏：使用is-fixed-top类。
  2. 底部页脚：使用is-fixed-bottom类。
  3. 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>固定顶部导航栏与底部页脚示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
        /* 仅为示例内容添加高度，以便演示滚动 */
        .content-section {
            padding: 20px;
            /* 确保内容足够长以触发滚动，但也要考虑固定元素的高度 */
            min-height: calc(100vh - 52px - 52px); /* 视口高度 - 导航栏高度 - 页脚高度 */
            background-color: #f5f5f5;
            overflow-y: auto; /* 确保内容区域自身可滚动 */
        }
        .fixed-footer {
            height: 52px; /* 模拟页脚高度，与导航栏高度一致 */
            line-height: 52px;
            text-align: center;
            color: white;
            background-color: #363636;
        }
    </style>
</head>
<body>
    <!-- 固定顶部导航栏 -->
    <n* class="n*bar is-fixed-top is-primary" 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*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">主页</a>
                <a class="n*bar-item">关于我们</a>
            </div>
            <div class="n*bar-end">
                <div class="n*bar-item">
                    <div class="buttons">
                        <a class="button is-light">登录</a>
                    </div>
                </div>
            </div>
        </div>
    </n*>

    <!-- 页面主体内容 -->
    <section class="section content-section">
        <div class="container">
            <h1 class="title">欢迎来到我的网站</h1>
            <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>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>这是页面内容的末尾，上面有很多内容，您可以滚动查看。</p>
        </div>
    </section>

    <!-- 固定底部页脚 -->
    <footer class="n*bar is-fixed-bottom fixed-footer">
        <div class="container">
            <p>&copy; 2025 我的公司. 保留所有权利。</p>
        </div>
    </footer>

    <script>
        // 激活 Bulma 导航栏的汉堡菜单（如果需要）
        document.addEventListener('DOMContentLoaded', () => {
            const $n*barBurgers = Array.prototype.slice.call(document.querySelectorAll('.n*bar-burger'), 0);
            if ($n*barBurgers.length > 0) {
                $n*barBurgers.forEach( el => {
                    el.addEventListener('click', () => {
                        const target = el.dataset.target;
                        const $target = document.getElementById(target);
                        el.classList.toggle('is-active');
                        $target.classList.toggle('is-active');
                    });
                });
            }
        });
    </script>
</body>
</html>

注意事项

  • HTML根元素类：has-n*bar-fixed-top和has-n*bar-fixed-bottom类是Bulma为了处理固定元素遮挡内容而提供的便捷方案。它们通过向html或body元素添加padding-top和padding-bottom来创建必要的偏移量。
  • 元素高度：has-n*bar-fixed-top和has-n*bar-fixed-bottom类假定固定元素的高度与Bulma默认导航栏的高度（通常是52px）一致。如果你的固定导航栏或页脚有自定义高度，你可能需要通过自定义CSS覆盖Bulma的默认padding值，或者使用J*aScript动态计算并设置。
  • 语义化：尽管可以将is-fixed-bottom应用于任何元素，但从语义化的角度考虑，将页脚内容放置在
    标签内是最佳实践。
  • 响应式设计：Bulma的固定导航栏默认是响应式的，在移动设备上会折叠成汉堡菜单。确保你的固定页脚也考虑了不同屏幕尺寸下的显示效果。
  • 替代方案：如果不在Bulma环境下，你可以使用纯CSS的position: fixed; top: 0;和position: fixed; bottom: 0;来实现固定元素，然后通过在body或主要内容容器上设置相应的padding-top和padding-bottom来避免内容遮挡。

总结

通过利用Bulma提供的is-fixed-top和is-fixed-bottom类，结合在HTML根元素上添加has-n*bar-fixed-top和has-n*bar-fixed-bottom类，我们可以轻松地在Bulma项目中实现具有固定顶部导航栏和底部页脚，同时中间内容区域可独立滚动的布局。这种方法比尝试修改hero-body的滚动行为更为直接和健壮，是构建专业Web界面的推荐实践。

Bulma固定导航栏与页脚：实现可滚动内容区域的专业指南Bulma固定导航栏与页脚：实现可滚动内容区域的专业指南

以上就是Bulma固定导航栏与页脚：实现可滚动内容区域的专业指南的详细内容，更多请关注其它相关文章！


# 仅为  # seo算分词技巧  # 安康旅游网站建设  # 德州网站优化活动策划  # 推广网站雌云速捷真诚  # 望牛墩企业网站推广费用  # 凤阳网站关键词优化软件  # 明城网站建设公司  # 中山网站关键词排名  # 怎样申请免费网站推广员  # 当涂网站推广  # 关于我们  # 自定义  # 如何实现  # 这一  # 欢迎来到  # css  # 您可以  # 有很多  # 它会  # 这是  # .net  # 响应式设计  # cdn  # ai  # ssl  # npm  # go  # js  # html  # java  # javascript 


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


相关推荐： 苹果SE如何开启单手模式_苹果SE单手操作功能  在J*a中如何实现在线问答与评分系统_问答评分项目开发方法说明  蛙漫2(台版)正版官网 2025免费网页版分享  苹果11如何更换iCloud账号_苹果11账号切换的具体步骤  《撕歌》会员开通方法  快手极速版在线体验区 快手极速版网页体验入口  C++ virtual析构函数作用_C++基类虚析构函数防止内存泄漏  《红果免费短剧》下载观看方法  支付宝登录刷脸不是本人如何解决  Bootstrap 5导航栏折叠功能失效：数据属性迁移指南  51漫画网实时入口 51漫画网页版官方免费漫画入口  Coolpad5890 ROM刷机包  哈尔滨城市通昵称修改方法  《via浏览器》强制缩放网页设置方法  mysql通配符能用于日志查询吗_mysql通配符在系统日志查询中的实际使用方法  抖音号升级成企业资质怎么弄？有什么好处？  OPPO A3 WiFi频繁断开怎么办 OPPO A3网络优化技巧  win11怎么设置默认终端为Windows Terminal Win11替代CMD和PowerShell【技巧】  太平年在哪个平台播出  Win11怎么设置分辨率 Win11显示设置调整分辨率及刷新率修改  cad怎么隐藏指定的图层_cad隐藏或冻结图层方法  QQ邮箱官方登录页_腾讯出品安全稳定的邮箱服务  Keras中Convolution2D层及其核心辅助层详解  TikTok笔记文字无法编辑如何解决 TikTok笔记文字编辑优化方法  个人所得税办理入口 个人所得税综合所得年度汇算入口  如何在mysql中使用索引提示_mysql索引提示优化方法  手机远程连接电脑方法  嘴唇干裂起皮怎么办 唇部护理与预防干裂的方法【详解】  如何自定义苹果手机铃声  追剧达人如何发弹幕  在VS Code中利用AI辅助进行代码迁移  Pandas中基于动态偏移量实现DataFrame列值位移的策略  Python中安全地将环境变量转换为整数的类型注解指南  漫蛙manwa2网页版书签同步链接_漫蛙manwa多设备登录入口  优酷官网登录入口电脑版 优酷官网网址入口  顺丰官方查单号入口 顺丰快递单号查询官网入口  《咸鱼之王》新版孙坚技能解析  ToDesk远程摄像头功能使用方法_ToDesk远程视频画面查看设置教程  Lar*el Socialite单设备登录策略：实现用户唯一会话管理  人教版电子教材在线获取指南  抖音小程序怎么开通？小程序开通条件是什么？  研招网官方网站招生平台入口_中国研究生招生信息网官网登录  《梦想世界：长风问剑录》药师一图流分享  如何使用 composer 和 aop-php 实现 AOP 编程？  抖音号显示企业机构号是什么意思？企业机构号申请条件是什么？  如何查询国外邮政编码_国外邮政编码查询的多种有效途径  手机坏了微信聊天记录怎么导出来 新手机恢复聊天记录技巧  Vue 3中独立响应式实例的创建与应用  Win10通知横幅停留时间修改 Win10自定义通知显示时长【技巧】  J*a实现任务清单管理_集合框架综合入门练手 

 2025-12-09

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

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

点击免费数据支持

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

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

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

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

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.