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

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 】


相关推荐： PHP动态导航按钮：根据用户登录状态切换链接与文本  《理想汽车》权限管理设置方法  AO3永久镜像入口开放_AO3最新网址兼容所有浏览器  《原神》月之一版本新增书籍一览  《微信》视频号原创声明开启方法  Bootstrap 5导航栏折叠功能失效：数据属性迁移指南  如何配置VS Code作为您Git操作的默认编辑器  邦丰播放器频道搜索设置  FullCalendar自定义按钮样式定制指南  Flexbox布局实践：实现底部页脚与顶部粘性导航条的完美结合  百度地图离线地图无法加载如何解决 百度地图离线地图加载优化方法  Windows自带的便笺数据如何备份_防止数据丢失的便利贴迁移教程【干货】  抖音号显示企业机构号是什么意思？企业机构号申请条件是什么？  快手极速版在线体验区 快手极速版网页体验入口  OpenWeatherMap API：通过城市名称获取天气预报数据指南  PHP utf8_encode 字符编码转换疑难解析与最佳实践  为什么XML解析器对大小写敏感？ 理解XML规范中的大小写规则与最佳实践  金牛福袋获取攻略  从HTML表单获取逗号分隔值并转换为NumPy数组进行预测  如何在CSS中使用absolute实现登录弹窗居中_transform translate结合  192.168.1.1路由器后台入口 192.168.1.1默认登录入口  HTML与J*aScript实现下拉菜单驱动的动态表格：构建交互式维修表单  《豆瓣》私信用户方法  邮编号码查询app有哪些_邮编号码查询推荐app及使用体验  J*aScript实现下拉菜单驱动的动态表格数据展示  抖音火山版如何进行提现  word怎么将图片设置为页面背景并不影响打印_Word图片背景设置方法  哔哩哔哩在线观看入口 B站官网免费进入  《火影忍者：木叶高手》快速升级攻略  在Spring Boot Thymeleaf中利用布尔属性实现容器的条件显示  快递优选如何查优选物流_快递优选专属物流渠道查询与配送时效  德邦快递会员怎么开通  谷歌邮箱怎么换绑定邮箱Gmail安全备份邮箱修改方法  J*a中逻辑运算符如何使用_逻辑与或非的基础用法讲解  如何在CSS中使用伪类选择器_hover实现悬停效果  电脑双系统如何安装和卸载 Windows和Linux双系统安装教程【详解】  《随手记》关闭首页消息推送方法  高德地图导航路线偏差报警频繁怎么办 高德地图路线偏差修复与优化方法  手机雨课堂网页版入口免登录 雨课堂网页版可点击直接进入  动漫岛在线动漫网 动漫岛动漫在线观看官方入口  在Dash应用中自定义HTML标题和网站图标  word文档中的分隔符有哪些不同类型和用途_Word分隔符类型与用途方法  向日葵客户端怎么进行语音通话_向日葵客户端语音通话功能使用方法  firefox火狐浏览器最新官网主页_ firefox火狐浏览器平台入口直达官方链接  江苏大剧院会员卡购买步骤  WPS文字如何进行简繁转换  MacBook Pro词典使用指南  Cassandra中复合主键、二级索引与ORDER BY排序的限制与解决方案  掌握Go App Engine项目结构与GOPATH：包管理与导入实践  《美篇》取消会员自动续费方法 

 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.