在 Bulma 中实现固定导航栏、页脚与可滚动主体内容-html教程-PHP中文网

在 Bulma 中实现固定导航栏、页脚与可滚动主体内容

聖光之護

发布： 2025-12-14 13:26:37

原创

201人浏览过

在 bulma 中实现固定导航栏、页脚与可滚动主体内容

本文旨在指导您如何在 Bulma 框架中构建一个具备固定顶部导航栏和底部页脚，同时允许中间主体内容区域自由滚动的页面布局。通过利用 Bulma 提供的 `is-fixed-top` 和 `is-fixed-bottom` 类，并配合 HTML 元素的辅助类，您可以轻松实现这一常见的 UI 需求，避免内容溢出导致页脚被推出视口的问题。

理解固定元素与滚动机制

在网页设计中，常见的需求是让导航栏和页脚始终保持在视口的顶部和底部，而页面的主要内容区域则可以根据其长度进行滚动。传统的做法可能会尝试使用 is-fullheight 等属性来控制容器高度，但这在内容溢出时往往会导致页脚被推到视口之外。Bulma 提供了专门的固定定位类来优雅地解决这个问题。

其核心思想是：将导航栏和页脚从文档流中脱离，固定在视口边缘，然后通过为 html> 或

元素添加相应的填充（padding），为固定元素腾出空间，从而确保主体内容不会被它们遮挡。

实现固定顶部导航栏

要创建一个始终固定在页面顶部的导航栏，您需要为 Bulma 的 navbar 组件添加 is-fixed-top 类。此外，为了防止页面内容被固定导航栏遮挡，您还需要在元素上添加 has-navbar-fixed-top 类。

示例代码：

<!DOCTYPE html>
<html class="has-navbar-fixed-top"> <!-- 重要：添加此CSS类 -->
<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">
</head>
<body>
    <!-- 固定顶部导航栏 -->
    <nav class="navbar is-fixed-top is-primary" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="#">
                @@##@@
            </a>
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item">主页</a>
                <a class="navbar-item">关于</a>
            </div>
            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <a class="button is-light">登录</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面主体内容将在这里 -->
    <!-- ... -->

</body>
</html>

登录后复制

has-navbar-fixed-top 类会自动为元素添加一个 padding-top，其值等于 Bulma 导航栏的默认高度，从而确保页面内容从导航栏下方开始显示。

实现固定底部页脚

与固定顶部导航栏类似，您也可以创建一个固定在页面底部的页脚。尽管 Bulma 没有一个专门的 footer 组件用于固定定位，但您可以利用 navbar 组件的样式和 is-fixed-bottom 类来实现。为了页脚腾出空间，您需要在元素上添加 has-navbar-fixed-bottom 类。

示例代码：

<!DOCTYPE html>
<html class="has-navbar-fixed-top has-navbar-fixed-bottom"> <!-- 重要：同时添加顶部和底部CSS类 -->
<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>
        /* 确保hero-body占据剩余空间并可滚动 */
        .hero.is-fullheight-with-nav-footer {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .hero-body.is-scrollable {
            flex-grow: 1; /* 占据所有可用空间 */
            overflow-y: auto; /* 允许垂直滚动 */
            padding-top: 0; /* 移除默认padding，因为html已处理 */
            padding-bottom: 0;
        }
    </style>
</head>
<body>
    <!-- 固定顶部导航栏 (如上所示) -->
    <nav class="navbar is-fixed-top is-primary" role="navigation" aria-label="main navigation">
        <!-- ... 导航栏内容 ... -->
    </nav>

    <!-- 主体内容区域，通常在Bulma中可以是hero-body -->
    <section class="hero is-fullheight-with-nav-footer">
        <div class="hero-body is-scrollable">
            <div class="container">
                <h1 class="title">
                    欢迎来到我的页面
                </h1>
                <p class="subtitle">
                    这是一个带有固定导航栏和页脚的可滚动内容区域。
                </p>
                <!-- 放置大量内容以触发滚动 -->
                <div style="height: 1500px; background-color: #f5f5f5; padding: 20px;">
                    <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/1526">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680217260032.jpg" alt="美图AI开放平台">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1526">美图AI开放平台</a>
                            <p>美图推出的AI人脸图像处理平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="美图AI开放平台">
                                <span>111</span>
                            </div>
                        </div>
                        <a href="/ai/1526" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="美图AI开放平台">
                        </a>
                    </div>
                
                    <p>... (重复上述段落多次) ...</p>
                    <p>... (重复上述段落多次) ...</p>
                    <p>这是内容的底部。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 固定底部页脚 -->
    <nav class="navbar is-fixed-bottom is-dark" role="navigation" aria-label="footer navigation">
        <div class="navbar-item has-text-centered is-expanded">
            <p>&copy; 2023 我的网站. 保留所有权利。</p>
        </div>
    </nav>

</body>
</html>

登录后复制

has-navbar-fixed-bottom 类会为元素添加一个 padding-bottom，其值等于底部导航栏的默认高度。这样，即使主体内容很长，页脚也会始终保持可见，并且主体内容会在导航栏和页脚之间滚动。

结合 hero-body 实现可滚动内容

在上述结构中，hero-body 元素自然地成为了可滚动的内容区域。当元素通过 has-navbar-fixed-top 和 has-navbar-fixed-bottom 获得了足够的 padding 后，浏览器会正确计算出剩余的视口空间。

为了确保 hero-body 能够填充这些剩余空间并实现内部滚动，我们可以做一些额外的 CSS 调整：

外部容器（例如 hero）: 设置 min-height: 100vh; 并使用 display: flex; flex-direction: column; 来使其占据整个视口高度，并使其子元素垂直排列。
hero-body: 添加 flex-grow: 1; 使其在 flex 容器中占据所有可用空间，并设置 overflow-y: auto; 来允许其内容在垂直方向上滚动。

通过这种组合，您便能获得一个完美的布局：顶部和底部的导航栏/页脚固定不动，而中间的 hero-body 区域则可以独立滚动，承载任意长度的内容。

注意事项与最佳实践

或上的类: 务必在或元素上添加 has-navbar-fixed-top 和/或 has-navbar-fixed-bottom 类。如果没有这些类，固定导航栏和页脚会覆盖部分页面内容。
内容高度: 确保您的主体内容（例如 hero-body 内部的内容）足够长以触发滚动，以便测试效果。
响应式设计: Bulma 的固定导航栏在不同屏幕尺寸下表现良好。但如果您的页脚内容在小屏幕上变得复杂，可能需要额外的响应式调整。
语义化: 尽管示例中使用了 nav 元素作为页脚，从语义化的角度看，使用 footer 元素会更佳。如果使用 footer，您可能需要手动为其添加 position: fixed; bottom: 0; width: 100%; 等样式，并确保元素的 padding-bottom 与其高度匹配。Bulma 的 is-fixed-bottom 主要是为 navbar 设计的，但其样式可以被复用。
避免冲突: 当使用 is-fixed-top 和 is-fixed-bottom 时，通常不需要在包含 hero-body 的 hero 元素上使用 is-fullheight，因为固定定位已经改变了布局上下文。

总结

通过巧妙地运用 Bulma 的 is-fixed-top 和 is-fixed-bottom 类，并配合在元素上设置 has-navbar-fixed-top 和 has-navbar-fixed-bottom，您可以轻松构建出具有固定导航栏和页脚，且中间内容区域可独立滚动的现代网页布局。这种方法不仅解决了内容溢出导致页脚不可见的问题，也保持了页面的专业性和用户体验。